Angular examples
Avatar Generator With Initials in Angular
Today it’s hard to imagine a user profile without a photo. If the user didn’t upload a photo, the system will add a default photo for him. But I like it, when the system can generate photos with random colors with initials of the user. Let’s make this thing together.
HTML
Our HTML contains only a couple of divs and images. If the user has a photo we don’t generate it with initials. We set up the color of the circle using ‘ngStyle’.
Less
In the less file, we just set up a text and an image. The shape of the image is a circle and the text will be in the middle of the image.
TS
Our component has two inputs for the photo and for the name. We need to check if the photo is empty. If yes, we create user initials and set a random color. In function ‘createInitials’ we’re going though every character and define uppercase characters.
Our avatar generator is ready to use. If you need to take a closer look at the project here is the link.
Originally published at http://tomorrowmeannever.com on February 15, 2020.
