HOW TO: Angular 5 Material Tutorial From Scratch -BASIC PROGRAMMING

Angular 5 Material Tutorial From Scratch is today’s leading topic. Technically, It’s an Angular, but I have defined a 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.

If you want to learn more about Angular 7 then check out this Angular 7 – The complete Guide course.

Content Overview [hide]

• 1 Angular 5 Material Tutorial
• 2 Step 1: Create a project.
• 3 Step 2: Install Angular Material and Angular CDK.
• 4 Step 3: Install Animations.
• 5 Step 4: Include a theme.
• 6 Step 5: Gesture Support.
• 7 Step 6: Include other components.

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

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

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 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.

RELATED POSTS

Angular NgFor Tutorial With Example | NgForOf Directive

Feb 12, 2019

Angular Modal Tutorial With Example | Angular Material…

Feb 11, 2019

 PREV NEXT  1 of 22

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

FORK ME ON GITHUB