Angular 11 Material Tutorial: The Complete Guide

Technically, It’s an Angular and AngularJS because there are some changes with every new Angular release. Also, from AngularJS to Angular, there are so many changes even the whole framework is changed. So bear with me, and let us get started on this Angular Material Tutorial With Example From Scratch.

Angular 11 Material Tutorial

First, we need to install the Angular CLI globally in our system. You can find the full documentation on its original website. We need to install it globally, so type the following command.

npm install -g @angular/cli

Step 1: Create a project.

Go to your cmd and type the following command.

ng new ng5material

It will create a new project. All the boilerplate will be included in this project.

Step 2: Install Angular Material and Angular CDK.

Type the following command to install the dependencies.

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

Step 3: Install Animations.

To work with Angular Material, we need to install animations module to work our design correctly.

npm install --save @angular/animations

We need to import the Angular animation module into the app.module.ts file.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

imports: [
    BrowserModule, BrowserAnimationsModule
],

Now, we are creating our module, which is responsible for all of our Angular Material Components.

So create one file inside the src  >>  app folder and create one file called ngmaterial.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {  MatButtonModule } from '@angular/material';

@NgModule({
  imports: [MatButtonModule],
  exports: [MatButtonModule]
})
export class MaterialAppModule { }

Okay, so we have included the MatButtonModule in our app. Now, we need to register this custom MaterialAppModule in our app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialAppModule } from './ngmaterial.module';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, MaterialAppModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Include a theme.

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a pre-built theme, including one of Angular Material’s prebuilt themes globally in your application. If you’re using the Angular CLI, you can add this to your style.css

// style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Also, It is good to include the material icons in our application. So in the index.html file, include the following css file.

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Step 5: Gesture Support.

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. To get the full feature-set of these elements, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

npm install --save hammerjs

After installing, import it into your app’s entry point (e.g. src/main.ts).

// main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Okay, now everything is included correctly. Just write one essential Material component inside the app.component.html file.

// app.component.html

<button mat-button>Material Button</button>

Get rid of all the previous HTML and start the angular development server by the following command.

ng serve

Now, go to the browser port: 4200, and the URL will be: http://localhost:4200.

You can see there is one button, and if you click it, then some animation will be displayed as well. So finally our Material Design is included in our Angular Application.

Step 6: Include other components.

You can find more about its official documentation.
We includeToolbar in our application.

<mat-toolbar>  
  <mat-toolbar-row>
    <span>First Row</span>
  </mat-toolbar-row>

  <mat-toolbar-row>
    <span>Second Row</span>
  </mat-toolbar-row>
</mat-toolbar>

Also, include in our ngmaterial.module.ts file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {  MatButtonModule } from '@angular/material';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  imports: [MatButtonModule, MatToolbarModule],
  exports: [MatButtonModule, MatToolbarModule]
})
export class MaterialAppModule { }

This is how you can integrate different material components.

We will see the advanced components in the next tutorial. So here, the basic introduction of Angular 11 Material Tutorial With Example From Scratch is over.

Fork Me On Github