Getting Started with Angular Material

 

In this article, we are going to show you how to install Angular material to your angular project in few simple steps.So let’s dive right into it.

We are going to divide this article into several section.

  1. Project Creation
  2. Installing and configuring angular material to your project
  3. Creating material module
  4. Example of Angular Material (MatRadioModule)

1)Project Creation

We are going to use Angular CLI to create project ,creating other stuff like module and component etc. So, let’s open a command prompt window and create our Angular project:

ng new angular-material-example

Once the creation is done, we are going to start the Visual Studio Code editor and open our project.

2)Installing and configuring angular material to your project.

We are going to use npm to install the required packages.So, let’s do that first by navigating to the root folder of our project and running the below command.

npm install --save @angular/material @angular/cdk @angular/animations

After installation finishes, we should see this result:

Now, we need to configure animations, by importing BrowserAnimationsModule into the app.module.ts file:

Alternatively, you can disable animations by importing NoopAnimationsModule.

To continue, let’s include the prebuilt theme for Angular Material. The theme is required and we can choose one of the available pre-built themes:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-blugrey.css
  • purple-green.css

To include a theme, we need to open the styles.css file and include the following line

Now we install hammerjs library to support gesture.

npm install --save hammerjs

After the installation, we are going to import it as a first line in the maint.ts file:

3)Creating material module:

We can import all the required angular material component to our app.module.ts but it is not recommended. Therefore we create a separate module named material.module.ts in that module we import all the required component from angular material library and then we can import this module to our app module.

So, let’s create material module.

npm g module material --spec false

The above command create the module for us with a folder material and inside it material.module.ts file will be created. In created module one thing will be missing when you create module from command that is exports array under @ngModule. So we have to write exports array.For right now we declare exports array empty.

Note:Exports array is containing components.It will allow us to use material module components outside this module.

4)Example of Angular Material (MatRadioModule)

 

First we have to create component. Let’s create component with name RadioExample .

ng g component radio-example --spec false

The above command create component for us and add to the imports of app.module.ts .

 

Example will on radio button. In this example we create radio button group and a label.We show the value of selected radio button value to that label.

First we have to import MatRadioModule module from angular material library to our material module. We have exports our MatRadioModule so app module can use component inside MatRadioModule.

Now we have to import material module to app module.Also add FormsModule as shown below

Open radio-example.component.ts and add these lines of code.

Open radio-example.component.html and add these lines of code.

Open radio-example.component.css and add these lines of code.

Remove defualt code and add selector of radio-example.component to our app.component.html

Now it’s time to run our project and see the outcome.For running our project use ng serve command.

All looks good.

Conclusion : In this article we created angular project and seen basic example to get started with angular material.

 

Please follow and like us: