ngx-letters-avatar-14 v14.0.4

This fork support for Angular 14

npm i ngx-letters-avatar-14

Angular letters-avatar Component Ngx-letters-avatar (Angular 2+)

Component will genrate an avatar of your name's initial letters

Features

• Set width and height properties or only one of them.
• Set the avatarName property wich is used to display the initials.
• Set the src property to show ordinary image in case you don't want to show letters avatar.
• You can set the fontFamily for the characters.
• You can set circular which is a boolean value to true or false to create a circlular shaped image.
• You can set borderRadius property to make rounded border for the shape.
• You can set id property for the image.

Getting Started

Installing

npm i ngx-letters-avatar

Configuration

Ensure you import the module and the dependencies:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { LettersAvatarModule } from "ngx-letters-avatar";

@NgModule({
  declarations: [],
  imports: [BrowserModule, LettersAvatarModule],
  exports: [],
  providers: []
})
export class AppModule {}

Basic Usage

<div *ngFor="let user of users">
  <p>{{ user.name }}</p>
  <ngx-letters-avatar 
    [avatarName]="user.name" 
    [width]="40" 
    [circular]="true"
    fontFamily="Open Sans"></ngx-letters-avatar>
</div>

@Component({
  selector: 'app',
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
});

export class App {
  users = [
    { name: "Girgis A.Jacoub", id: 1 },
    { name: "Your name", id: 2 },
    { name: "another name", id: 3 },
  ];
}

Api for letters-avatar Component

These are the list of Inputs[] that are supported by the component. Configure the settings to meet your requirement.