angular2-letter-avatar
letter avatar is angular2 directive. It will generate avatar based on given text
The sources for this package are in (https://github.com/rajan-g/angular2-letter-avatar.git) repo. Please file issues and pull requests against that repo.
Demo Output
Live Demo
Live Demo Site OR Live Demo Site
Install from npm
npm install angular2-letter-avatarcomponent file use like below
import {Component} from 'angular2/core';
import {LetterAvatarDirective} from '../directives/letter-avatar.directive';
@Component({
selector : 'my-app',
directives: [LetterAvatarDirective],
template: `
<avatar [avatardata]="avatarDataSquare"></avatar>
<avatar [avatardata]="avatarDataCircle1"></avatar>
<avatar [avatardata]="avatarDataCircle2"></avatar>`
})
export class AppComponent {
public avatarDataSquare: any = {
size: 100,
// background: '#F39C12', // by default it will produce dynamic colors
fontColor: '#FFFFFF',
border: "2px solid #d3d3d3",
isSquare: true,
text: "Rajan Gunasekaran"
};
public avatarDataCircle1: any = {
size: 100,
// background: '#F39C12', // by default it will produce dynamic colors
fontColor: '#FFFFFF',
border: "2px solid #d3d3d3",
isSquare: false,
text: "Rajan Gunasekaran"
};
public avatarDataCircle2: any = {
size: 100, // default size is 100
// background: '#F39C12', // by default it will produce dynamic colors
fontColor: '#FFFFFF',
border: "2px solid #d3d3d3",
isSquare: false, // if it is true then letter avatar will be in square defaule value is false
text: "Siva", //
fixedColor:true //if you enable true then letter will have same color for ever default value is false
};
}
For Test demo
- Download this module
- Run following command
npm install npm start
