Ionic avatar


#1

I just read about ionic avatars and was trying to use it in my application. But for some list items with no image, I want to use the custom first letter avatar, similar to the one which we can see in popular gmail app.
I have uploaded an image for reference. Someone please help me on this.


#2

simple ngIf for your avater image?
if there is an image --> show image, if not build a circle with css3 and put the firstletter of the name in.


#3

I prefer to use ng show because there is and you can use angulars default value to set the image or class you need.


#4

I got that implemented using ngIf.
Thank you :slight_smile:


#5

created a angularjs directive for the gmail like letter avatar for all letters,number and special character, provided the attributes to changes shape circle|square, borders,generate random colors.

this may help someone looking for the angular directive http://uttesh.com/ionic-letteravatar/


#6

https://github.com/dheeran1/ionic2-circle-text-avatar this may help