ng-letter-avatar!

directive for the letter avatar for the given string like gmail, first letter of the given data will be the avatar

Download

Default shape

avatar border styles

avatarborder="true" :

avatarcustomborder="border:5px solid black" :

Custom alphabet colors

alphabetcolors=array of the colors

Custom avatar background color for specific data

avatarcustombgcolor=specify the color code

Rotate avatar

rotatedeg=specify the rotate degree

Dynamic avatar

dynamic=true

OR

Numbers

Special characters

Chinese

ಕನ್ನಡ ಅಕ್ಷರಮಾಲೆ

Round shape

Numbers

Special characters

avatar border styles

avatarborder="true" :

avatarcustomborder="border:5px solid black" :

Chinese

ಕನ್ನಡ ಅಕ್ಷರಮಾಲೆ

Chinese

Quick start

bower install ngletteravatar
                    

or alternatively download and include `ngletteravatar.js` after `angular.min.js`.
Add the `ngletteravatar` module as a dependency when creating your app, e.g.

var app = angular.module('myApp', ['ngLetterAvatar']);`
                    
<ng-letter-avatar data="uttesh"></ng-letter-avatar>
                        
result :
<ng-letter-avatar  data="uttesh kumar" shape="round"></ng-letter-avatar>
                        
result :
<ng-letter-avatar data="uttesh" avatarborder="true" shape="round"></ng-letter-avatar>
                        
result :
<ng-letter-avatar charCount="2" data="uttesh kumar" shape="round"></ng-letter-avatar>
                        
result :
<ng-letter-avatar avatarborder="true" charCount="2" data="uttesh kumar" shape="round"></ng-letter-avatar>
                        
result :
<ng-letter-avatar avatarborder="true"  data="https://avatars1.githubusercontent.com/u/2218611?v=3&s=460" shape="round"></ng-letter-avatar>
                        
result :
<ng-letter-avatar  data="https://avatars1.githubusercontent.com/u/2218611?v=3&s=460" shape="round"></ng-letter-avatar>
                        
result :
attribute table
Attribute Default Description
avatarcustomborder No default value Using this attribute set the custom style to avatar borders i.e "border:5px solid black"
avatarcustombgcolor No default value Using this attribute set the custom color for avatar background
dynamic false Set this attribute to true if dynamically avatar needs to be generated on data change
rotatedeg 0 Set this attribute required degrees of rotation of the avatar
alphabetcolors Default color set Using this attribute set the custom colors for the alphabets only i.e alphabetcolors="customColors"
charCount 1 Specifies the number of letters to displayed. to generate combined letter avatar of firstname and lastname which are separated by space then set the value to '2'
data Input data i.e. email, names...etc
or
If image already exists for item, set image URL or image data
height 50 Set the height for the avatar all values in pixel only, dont append "px"
width 50 Set the width for the avatar all values in pixel only, dont append "px"
fontWeight 400 Set the font weight for the avatar
fontsize 30 Set the font size for the letter all values in pixel only, dont append "px"
shape square Set the shape for the avatar. set 'round' for rounded avatars
fontFamily HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif Set the font Family of the avatar.
avatarborder false Set the avatarborder to 'true' for the white border to avatar.