چگونه توییت های رنگارنگ در Angular بسازید.

در این مقاله قصد دارم به کمک یک npm ، متنهایی که با کاراکترهایی مثل # یا @ توی رشته شون وجود داره به یه رنگ دیگه نمایش بدیم. مثل این :

خیلی وقتا توی متنها می خواین یه موضوع با هشتگ ترند کنید یا آدرس نام کاربری یه شخص اعلام کنید برای این کار در انگولار از یه کتابخونه npm به نام hashtag-mention-colorizer استفاده می کنیم. من سعی میکنم این روش توی چند قدم آموزش بدم.

قدم اول _ نصب npm

توی اولین قدم لازم هستش کتابخونه hashtag-mention-colorizer توی ترمینال خودتون نصب کنید:

npm i hashtag-mention-colorizer

قدم دوم _ به سراغ app.module.ts میریم

لازم هستش توی app.module.ts یه تغییرات کوچیکی بدیم :

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 {}

قدم سوم _ به سراغ فایل app.component.ts میریم

برای اینکه متن خودمون ببینیم باید دو تا رشته تستی توی app.component.ts ایجاد کنیم:

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 ';
}

قدم چهارم _ اضافه کردن پایپ hmColor برای تغییر رنگ

برای تغییر رنگ متن لازم این دوتا رشته توی innerHTML تگ به عنوان یک پایپ به نام hmColor مقدار دهی کنیم:

<div class=&quotcontainer&quot>
 <span [innerHTML]=&quottext1 | hmColor&quot></span> 
 <span [innerHTML]=&quottext2 | hmColor: '#18BE63'&quot></span>
</div>

با مقدار دهی hmColor: '#18BE63' می تونیم رنگ دلخواه خودمون هم به این متن ارائه کنیم.

به انتهای این مقاله آموزشی رسیدیم و امیدوارم استفاده کامل ازش ببرید.

ممنون از توجهتون :)