Angular is one of the most used frontend SPA frameworks out there. It is unique in many aspects. The developer community and the Angular team together have set best practices and good-to-haves that all of us follow. This together with the architectural choices makes Angular opinionated. But that is not necessarily a bad thing. These practices help to keep the codebase similar and easy to understand by others. The framework itself is bundled with tons of features that we as developers can leverage to create almost everything we need ⚔️

I personally, started learning Angular from youtube tutorials. I found amazing tutors on youtube that made concepts clearer than the minimal explanation we had on the documentation. I have been building applications from what I learned and I manage to get my business needs to meet 🙌

Being self-taught, online resources are the best source of knowledge. But unfortunately, even in most of the glamorous youtube channels and online tutors, best practices and design patterns are minimal; mostly forgotten.

So, where do you learn these from? The best way would be to look at someone else’s code which you think is designed well and adapt from. There are many libraries/plugins you can pick for this but, hey, the Angular team has its own component library, the Material component library! Where else can you learn design patterns better than the Angular team itself!? 🤷‍♂

Why Angular material?

Material components are set of angular components that are well tested and ready to use, built by the Angular team. These components are used by the community over the years and have it’s reputation high.

Apart from using them in our projects, there’s one other, maybe the more valuable use for these components. Material components can teach a lot about component design patterns in Angular.

We will be taking a shallow look at the Angular material library in the rest of this article and gather patterns that we can adapt to for our future projects!

For keeping this article simple, we will be looking at the source code of [mat-button](https://github.com/angular/components/blob/master/src/material/button/button.ts) and mat-card.

#programming #javascript #web-development #design-patterns #angular