AppDividend
Latest Code Tutorials

Angular 5 Material Tutorial From Scratch

23,313

Get real time updates directly on you device, subscribe now.

Angular 5 Material Tutorial From Scratch is today’s leading topic. Technically, It’s an Angular, but I have defined particular version because there are some changes with every new Angular release. Since AngularJS to Angular, there are so many changes even the whole framework is changed. So bear with me and let us get started to this Angular Material Tutorial With Example From Scratch.

Angular 5 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 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 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 { }

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, include 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">

Some components (mat-slide-togglemat-slidermatTooltip) 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 the browser port: 4200 and 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 5 Application.

Step 6: Include other components.

Related Posts
1 of 14

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 5 Material Tutorial With Example From Scratch is over.

Fork Me On Github

4 Comments
  1. ranjit says

    Hi Krunal.

    Really nice tutorial. i am an angular developer i followed your react tutorial.

    which one you prefer angular vs react ? and learning curve ?

    1. Krunal says

      I think react has bright future.

  2. Rupesh says

    Nice!
    It helps me to understand Angular material

  3. Ramesh says

    Hi i am new to visit you website.
    Good tutorial,How to change default behavior like color of button background etc..

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.