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.