Getting started with Angular Material

Manav Pandya  Print 
23 Aug 2018
13 Sep 2018
Beginner
524

Angular Material is simply a group of design components used by Angular. By using these material design components, we can easily integrate material design into our Angular application. Using angular material design component, we can design components for both mobile and web versions.

Recently angular 6 is released, and with that Angular material dependencies are already installed when we use @angular/cli.

Advantages of using Angular Material

  • Cross-platform user interface components, so that it can work on Web, Mobile, and desktop app as well

  • By using material design components, we can have the better user interface experience

  • We can achieve high responsiveness of the layout by providing a different attribute to the elements as per our project requirements

  • Easy to use syntax so that we can easily integrate angular material component into our angular application

  • Multiple layout options are available so that we can choose any theme and integrate it into our angular application

  • The angular material has more than 50 components so that we can use any component inside our application

  • Error log support makes it completely suitable for any scale of an application if we emit any attribute than it logs error into the console, isn’t it great

Who uses Angular Material?

The angular material is a product by Google, so Google itself uses material design component.

  • Gmail

  • YouTube

  • Google Cloud

And many more websites used angular material design component, even angular material docs also used material design.

Components in Angular Material

In Angular Material, primarily there are 6 types of components are available which are listed below.

  1. Form Control

    Used to integrate different form controls which are used with form like Textbox, Checkbox, Radio button, select, date picker etc.

  2. Navigation

    Navigation controls are used to provide facility to user to navigate from one page to another, there are three components are available in the navigation

    • Menu

    • Sidenav

    • Toolbar

  3. Layout

    Layout controls are used to construct page into the distributed way, there are many components are available which are listed below. Card,divider,list,stepper,tabs etc.

  4. Buttons

    Different buttons controls are also available to use the button as per requirements like toggle button, as a spinner, progress bars, icon etc.

  5. Modals

    Modals are a most used component which provides facility to provide dialog service to show some static information to the end user and there may be another purpose for what you can use modal controls, here in the angular material we have many modal controls like Dialog, Snack bar, Bottom sheet, tooltip etc.

  6. Data Table

    The data table is also one of the most used components which is used to show the list of records, filter it, search specific record, paginate the list of records etc. Angular material provides number of data table controls.

    • Table

    • Paginator

    • Sort Header

So these are the list of components provided by Angular material, next question may arise that how to integrate angular material in the angular app, so let’s learn the step by steps procedure for the same.

How to Integrate Angular Material

With the release of Angular 6, the new command is available called "ng" instead "npm", by using ng command we can easily download necessary dependencies and scripts as well. To install angular material dependency into our angular app we can use below ng command.

 ng add @angular/material
 

If you are using an older version of Angular than you can use below command to install the angular material.

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

If you are using yarn instead of npm than use below command.

 yarn install –save @angular/material @angular/animations @angular/cdk
 

After installing angular material using the above command, now we can use any of the material components into our angular application.

What’s New in Angular Material?

With the release of Angular 6, one of the new element is added into Angular Material which is called Angular Material Starter Component. Starter Components are the component in which collection of material components are included, and will create a specific layout to get started quickly with material components.

These components can be an entry point of any quick single page application after that we can make further changes into the pre-defined structure. Primarily there are three starter components added which are listed below.

  • Material Sidenav

  • Material Dashboard

  • Material Dashboard

By using those starter components we can have pre-configured functionality, to generate specific starter component we can use given ng commands.

  1. Material Sidenav

    Material Sidenav provides complete navigation bar at the right portion of the screen and also provides toolbar with it. To generate sidenav, we can use blow ng command

    ng generate @angular/material:materialNav –name <Any_Name>
  2. Material Dashboard

    The material dashboard is a collection of products which provides dashboard kind of layout by just using below ng command.

     ng generate @angular/material:materialDashboard –name <Any_Name>
  3. Material Datatable

    Material data table consists of a material table, using this table we can have many inbuilt functionalities to make table multipurpose. It supports various operations like paging, searching, filtering etc. To generate material data table, just use below ng command.

    ng generate @angular/material:materialTable –name <Any_Name>

So these are the starter components we have covered recently, but what about other controls, now we are going to see that how to integrate any material components into our application. We are going to learn one component which is a toolbar, let’s follow the steps. Previously we have installed an angular-material dependency, now open app.module.ts file and here we will import important toolbar dependencies.

App.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { MatToolbarModule, MatToolbar } from '@angular/material';
 import { AppComponent } from './app.component';
 
 @NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 MatToolbarModule,
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

To use markup of a toolbar component we need to use below markup tag into our html file as described below.

<mat-toolbar color="accent">
 <span>Angular Material - Toolbar </span>
 </mat-toolbar>

And for styling toolbar element and theaming, we need to import its style sheet file; we just need to import a single line into the styles.css file.

 @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 

Now to see how our material toolbar component looks like, we need to run our angular app, and you will get output like below screen.

This is the simple example in which we have covered that how to install angular material, import dependencies, use markup in HTML and run the example.

Summary

In this article getting started with the angular material, we have covered a few important topics about material components. In upcoming articles, we will explore more angular material components in a very depth manner.

Hands-on Learning
Free Interview Books
 
+