Give your website modern styling with Angular Material

Sep 3, 2020


There are plenty of options for styling your website, but a really easy one to use with Angular is Angular Material. It provides modern components (such as buttons, icons, tabs, navigation, etc) and styling (animations, shapes, shadows, etc). Like Bootstrap, you can pick out when someone uses the default color scheme and components right away, but (like Bootstrap), it is extremely powerful and can be customized to make really nice modern websites.

I am just starting to learn Angular Material, but wanted to install it now so I could use their toolbar. Later I plan to come back and customize the theme once the site has some more functionality. I'm not going to go through installing step-by-step, but instead will direct you to the Angular Material website, where they have plenty of guides and excellent documentation for how to add each of their components to your website. For in-depth research and tutorials on web design philosophy using Material (with plenty of dos and don'ts) see the Material site.

This is a short post just to make sure readers are aware of Angular Material because I'll be writing about my experiences implementing it.