Check out our Angular in-house trainings or a public Angular courses.
Try out fossilo.com, our angular project to archive complete websites.
What we will do today:
- install ngx-avatar component using npm in your Angular4 project
- implement it into the app
- test various options
Installation
In your terminal, go to your app folder and run the following command line to install the component ngx-avatar using npm:
npm install ngx-avatar --saveImplementation
In your app module, import the AvatarModule and add it to NgModule:
In your app template, use the ngx-avatar tag to display your avatar(s) from your account(s). It is possible to get the avatar from Twitter, Google, Facebook, Skype, Vkontakte and Gravatar. Here are some examples:
Then run your app in your browser to see your work!
ng serve -oOptions
Several options exist to customize your avatar in size, shape and colour. You can add name, value and style. Here is an example of a square-shaped avatar:
Check the official documentation for all the options.
That’s it ! Let’s try and get your avatar!
Thank you to haithem mosbahi for his great ngx-avatar library!
See you next time for another article about Angular4 ! Follow me on Twitter, LinkedIn or Medium and take a look at our letsboot.com medium article series.
