Helper directive for Ionic Angular 4.x to generate circular avatar, based upon first letter of given text. Color can be generated automatically or can be submitted by the user.

For Ionic version 3 and below refer to text-avatar version 1.0.0

@angular/*: 7.x
@ionic/angular: 4.1.0

• Installation
• How to use?
• Example
• Sample project
• Quick Preview

Ionic CLI version 5.x

Open up ionic-cli and execute command ionic g c text-avatar and copy all files from dist folder to your your -> cool-app/src/components/text-avatar/ folder.

and last thing register our new directive TextAvatar in app.module.ts file in imports sections of @NgModule decorator.

@NgModule({
  imports: [
    ...
    TextAvatarModule,
    ...
  ],
})

Just create selector <text-avatar> and provide your string in [text]="text" property. It will generate nice and cool text based circular avatar. Optionally [color]="#ff0000" and/or [textColor]="#00ff00" properties can be added to create an avatar with red background and green text.
Following example will show its use in ion-list

<ion-list>
  <ion-item *ngFor="let user of users" (click)="myClickHandler(user)">
      <ion-avatar slot="start">
        <text-avatar [text]="user.name" [color]="user.color"></text-avatar>
      </ion-avatar>
      
      <ion-label>
        <ion-text>
          <h3>{{ user.name }}</h3>
        </ion-text>

        <p>{{ user.company }} - {{ user.job_title }}</p>
      </ion-label>
    </ion-item>
</ion-list>

Open terminal or command prompt and follow these steps:

• cd example-app
• npm i or npm install
• ionic serve