How to Display Colourful Tweets in Your Angular App

It’s very common for front-end developers to work on social feed functionalities.
In many cases, it is possible to use embedded code or widgets to display recent tweets or posts, but sometimes clients might require a custom interface. That’s what happened to me this week.

The Problem

I had to work on an animated Twitter feed and I was requested to assign a specific color to hashtags and mentions in the text.
However, as the whole tweet comes from the API as a string, I had to come up with a functional way of processing the text to extract words starting with # and @ and give them a different color from the rest of the text.
So, I created a small library!

Introducing Hashtag-Mention-Colorizer

A simple library to color #hashtags and @mentions in your posts

It’s very common for front-end developers to work on social feed functionalities.
In many cases, it is possible to use embedded code or widgets to display recent tweets or posts, but sometimes clients might require a custom interface. That’s what happened to me this week.

<hr>

The Problem

I had to work on an animated Twitter feed and I was requested to assign a specific color to hashtags and mentions in the text.
However, as the whole tweet comes from the API as a string, I had to come up with a functional way of processing the text to extract words starting with # and @ and give them a different color from the rest of the text.
So, I created a small library!

<hr>

Introducing Hashtag-Mention-Colorizer

Hashtag-Mention-Colorizer is a small library that exposes an Angular pipe. You can use it to find hashtags and mentions in your strings and color them by passing the color code as a parameter for the pipe.
You can install it with the command:

npm i hashtag-mention-colorizer

And then include it in your preferred module:

import { HashtagMentionColLibModule } from 'dist/hashtag-mention-col-lib';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HashtagMentionColLibModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now the hmcolor pipe will be ready to use in the app templates.

<hr>

A Quick Example

So, let’s say we want to find all the hashtags and mentions in this text:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  text1 = 'Hello! @AlessiaAmitrano here! Check out my amazing new #angular #library ! ';
  text2 = '#frontend @devLifeUk #developer ';
}

We can use the pipe to achieve this!

If we don’t pass a specific color to it, it will apply a standard light blue color to all the hashtags and mentions in the text. We can try it out by using this template:

<div class="container">
  <article class="card">
    <div class="header">
      <img src="assets/me.png" alt="" />
      <div class="header-text">
        <span class="name">~AlleAmiDev~</span>
        <span class="nickname">@AlessiaAmitrano</span>
      </div>
    </div>
    <span [innerHTML]="text1 | hmColor"></span>
    <span [innerHTML]="text2 | hmColor: '#18BE63'"></span>
  </article>
</div>

As you can see, for text1, I use the pipe without declaring a custom color. On the contrary, with text2, I specify I want to apply the color ‘#18BE63’.
Attention: The pipe only works by passing the processed string to an HTML element through the [innerHtml] property.
The result will be the one in the cover image!

Et voilà! You can check out the complete code in the library’s GitHub repo.