nli

ngx-letter-image-avatar

Directive for generating letter avatar (initials) in case no src provided

Showing:

Popularity

Downloads/wk

55

GitHub Stars

0

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Angular Avatar

Readme

[ngxLetterImageAvatar]

[ngxLetterImageAvatar] is an Angular2+ directive, which allows to create image (png) avatars according to first letters of strings (initials)

Installation

Install ngxLetterImageAvatar directive using NPM:

npm install ngx-letter-image-avatar

Usage

  1. Import NgxLetterImageAvatar module:
import { NgModule } from '@angular/core';
import { NgxLetterImageAvatarModule } from 'ngx-letter-image-avatar';

@NgModule({
  ...
  imports: [
    ...
    NgxLetterImageAvatarModule
  ]
})
export class AppModule {}

Examples

<img class="app-avatar" ngxLetterImageAvatar="John Doe" src="/assets/images/avatar.png" alt="avatar">
<img class="app-avatar" ngxLetterImageAvatar="John Doe" alt="avatar">
<img class="app-avatar" [ngxLetterImageAvatar]="{ name: 'John Doe' }" alt="avatar">
<img class="app-avatar" [ngxLetterImageAvatar]="{ name: 'Good day to you' }" alt="avatar">

NgxLetterImageAvatar directive preview

Options

// you can pass as [ngxLetterImageAvatar] input object of type INgxLetterImageAvatarSettings or string (behave as name)
export interface INgxLetterImageAvatarSettings {
  name?: string; // string to get initials
  size?: number; // size. default = 500
  font?: string; // default = 'Arial'
  fontColor?: string; // default = '#FFFFFF'
  fill?: string; // default one of set depends of initials
  placeholder?: string; // default = '?'
}

Demo

https://stackblitz.com/edit/angular-2r4zhe

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial