Home » Angular » Angular Material Easy Installation with Angular 8/9

Angular Material Easy Installation with Angular 8/9

In the Angular 8/9, there are a lot of things changed with the Command Line Interface (CLI) and other Directives, Angular Ivy, Dependency Injection and much more. When comes to building the User Interface (UI) here the Angular Material providing more facilities to build the Mobile and Web Applications. Angular Material offers the best and beautiful UI Components also it was fully developed for Angular and the usage of Angular Material is rapidly growing day by day.

In this article, I show you Angular Material easy Installation with Angular 8/9. In the Angular 8/9, it is easy to install the Angular Material with the simple steps with the default dependencies you can step up your project quickly. Below you have step by step instructions to configure your Angular Material project.

Getting Started with Angular App

Before using Angular Material first you need to install the Angular App. The best way to create your Angular project using Command Line Interface (CLI), for that here you have an article for installing an Angular app.

Install Angular Material using NPM in your Angular App

Step 1

After setup your Angular project now it is time to install Angular Material using the following NPM command.

Step 2

Once the Angular Material installed in your project it automatically suggest you to install supporting files for your Angular project.

Like the below, you get the suggestion for the Angular Material prebuilt theme. Select any one of the theme to proceed.

After installed prebuilt theme now set up HammerJS by using "Y" command, this will install automatically in your node_modules.

Next, you need to set up browser animations for your Angular Material for that enter "Y" command to complete the step.

Once you completed the above steps you can see all the modules imported automatically in your Angular project. Example: In your app.module.ts you can see the BrowserAnimationsModule imported automatically, Hammer JS imported in main.ts and your theme file imported in angular.json. This is the good advantages in Angular 8 and 9.

Step 3

Create custom Angular Material file in src > app > as angular-material.ts. The purpose of creating this file to maintain all Angular Material UI Components in one place, this will help to reduce your work.

Now open the file from src > app > angular-material.ts and add the following code.

In the above angular-material.ts file you can see they are two Modules imported from the Angular Material one is MatButtonModule and another one MatIconModule. So finally the angular-material.ts exported as "AngularMaterial" and this will be imported in app.module.ts.

Step 4

Now open app.module.ts and import AngularMaterial in your Angular project. Below you can see the imported AngularMaterial.

Step 5

In the final step, you need to add the following Material Button varieties HTML code in your app.component.html. If you want to know more about the Button Component here you have the link.

Now run the your Angular App by using ng serve, Once compiled successfully now open http://localhost:4200/ and see the output. Here below you can see the output screenshot.

Angular-8-and-9-Button-Component-Tutorial-with-Angular-Material

Conclustion:

I hope in this article, you learned the Angular Material easy installation with Angular 8/9. Here we used only buttons components, in the following articles I show you other components with examples.

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top