Angular Material UI

IMO you need to know 3 things before reading this article:

• Authentication and Authorization in Angular. Whether you wanna use casl or anything else
• Know what is lvy. It is simple, It is just Angular compiler. But you can read more about it in google.
• Knowing Angular routing module and how it works
• Knowing the Angular fundamentals. for that read this post.

So let me begin with elaborating its definition:

• IMO It is just another bootstrap with some ace
• It is just pre-written components and css classes which speed up the development process. BTW we have also Angular Flex-Layout which is also developed and is maintained by Angular team, but is a separated library.

CDK stands for Component Dev Kit

Which is a set of behavior for building UI components.

Now to install Angular material do this:

ng add @angular/material

When you run this command it will asks you - It did in v14 - to set up global Angular Material typography style or not. But before going forward I like to say what does it means exactly.

• Angular uses typography which is a way to arrange texts in a way to be more: readable, legible, and appealing.
• By default Angular Material UI typography won't be applied globally and you need to do something like this <div class="mat-typography"><h1>I am styled</h1></div>. But if you say yes to that former question you do not need to do that and you can just do this: <h1>I am styled by default</h1>

As you can see when we say yes it will add the class in index.html - The main HTML file. This is how it applies the typography globally. Now the second question rises, Do you want to include Angular animations? Let's break this one into simpler parts:

• We all know what is animation in HTML world.
• Here it is exactly like bootstrap animations AFAIK

Create angular-material module

To keep out AppModule clean and neat I prefer to create a new module for Angular Material UI imports. Note that --module tells cli to auto import it in AppModule and basically I like to delegate tedium boring foolish tasks to the CLI.

ng generate module angular-material --module app

As I said most of tasks done by CLI an finally we just need to do one thing in AppModule; adding schemas: [CUSTOM_ELEMENTS_SCHEMA], in the @NgModule.

• TBH I am still not mastered over this guy. So maybe this post help you more. BTW please do not jump between foci and just keep in mind what I said.
• This config allow us to use non-angular elements/properties with dash case standard without interfering in Angular functionalities.
• Basically we call them web components where used to be to allow us define custom tags/properties.
• BTW web components are useful in two scenario: 1. Let you to create reuseable html elements, 2. Migrate Angular apps to higher version. Here is a simple example of a web component:

<my-good-tag weird-prop="value">

Hello

</my-good-tag>