AppDividend
Latest Code Tutorials

Angular Material Example Tutorial From Scratch

293

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

Angular Material Example Tutorial From Scratch is today’s leading topic.  We use Angular 6 and Angular Material 6 for this demo.  Angular Material is ground running with large, modern UI components that work across the web, mobile, and desktop. Angular Material components will help us in constructing attractive UI and UX, consistent, and functional web pages and web applications while keeping to modern web design principles like browser portability and compatibility, device independence, and graceful degradation. Angular Material helps in creating faster, beautiful, and responsive web apps and websites. You can find more about Angular Material on their official docs.

Angular Material Example Tutorial

First, we need to install Angular. We are using Angular CLI to install the Angular. Right now, Angular 6 is the latest. So if you have not installed Angular CLI then install it using the following command.

#1: Install Angular CLI on Mac

Type the following command.

npm install -g @angular/cli

If you are using Mac, then prepend sudo, and if you are the windows user, then please open the CMD in Administrator mode, and you can install the above package globally on your machine.

Now, generate the Angular project using the following command.

ng new material

#2: Install other libraries.

Go into the project and install the hammerjs using the following command.

npm install --save hammerjs

Hammer.js is the optional dependency and helps with touch support for a few of the components.

Now, install Angular Material and Angular Animations using the following command.

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

Now, include hammerjs inside the angular.json file. You can find this file on the root of the project.

"scripts": [
     "./node_modules/hammerjs/hammer.min.js"
]

#3: Create a Custom Material Module File.

Okay, now inside src >> app folder, create one module file called material.module.ts.

Write the following code inside the material.module.ts file.

// material.module.ts

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatCardModule
  ]
})

export class MaterialModule {}

Here, we have imported all the components that we need in our Material Angular App. We can add other components in future if we need. The reason this file is written on its own is that it is easy to include all the Material components in this file and later this file will be imported inside the app.module.ts.

#4: Import a pre-built theme and Material icons

Angular Material comes with some pre-built themes. These themes have set off the colors and basic styling. The main available themes are indigo-pinkdeeppurple-amberpurple-green and pink-bluegrey.

To import the theme, you can add the following code to your global styles.css file. The file is inside src folder.

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

You can also have access to the Material Design icons and use named icons with the <mat-icon> component. To import them to your project, you can add this to the head section of your project’s root index.html file.

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

Now the final step is to import material.module.ts and other angular material module files inside the app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Also, write the html inside an app.component.html file.

<div>
  <mat-card>
    <button mat-raised-button>Cersie Lannister</button>
    <button mat-raised-button color="primary">Jaime Lannister</button>
    <button mat-raised-button color="accent">Tyrion Lannister</button>
  </mat-card>
</div>

Now start the Angular development server using the following command.

ng serve --open

 

Angular Material Example Tutorial

Finally, we have completed the steps to include Material in Angular Framework.

Related Posts
1 of 12

#5: Different Angular Components.

Let us add a text input inside our application. First, import the material component inside the material.module.ts file.

//material.module.ts

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatCardModule,
  MatInputModule
} from '@angular/material';

@NgModule({
  
  exports: [
    MatButtonModule,
    MatCardModule,
    MatInputModule
  ]
})

export class MaterialModule {}

Now, write the HTML for that inside app.component.html file.

<div>
  <mat-card>
    <button mat-raised-button>Cersie Lannister</button>
    <button mat-raised-button color="primary">Jaime Lannister</button>
    <button mat-raised-button color="accent">Tyrion Lannister</button>
  </mat-card>
  <form class="form-center">
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Favorite food" value="Pizza">
    </mat-form-field>
  </form>
</div>

Also, if you need to give some designing to the app component, then you need to write that css code in the component-specific css file, and in our case it is app.component.css.

.form-center {
  margin-top: 20px
}

Save the file and go to the browser and you can see the textbox is there.

#Navigation in Angular Material

For navigation, basically, we need the following angular material modules.

  1. MatMenuModule
        2. MatToolbarModule

 

We can also import the Angular Material Icons for that. Let us do it inside the material.module.ts file.

// material.module.ts

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatCardModule,
  MatInputModule,
  MatMenuModule,
  MatIconModule,
  MatToolbarModule,
} from '@angular/material';

@NgModule({

  exports: [
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatMenuModule,
    MatIconModule,
    MatToolbarModule
  ]
})

export class MaterialModule {}

Also, write the HTML code inside an app.component.html file.

<div>
  <mat-toolbar color="primary">
    <span>Angular Material Tutorial</span>
    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>About</button>
    <button mat-menu-item>Contact</button>
  </mat-menu>
  <mat-card>
    <button mat-raised-button>Cersie Lannister</button>
    <button mat-raised-button color="primary">Jaime Lannister</button>
    <button mat-raised-button color="accent">Tyrion Lannister</button>
  </mat-card>
  <form class="form-center">
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Favorite food" value="Pizza">
    </mat-form-field>
  </form>
</div>

Save the file and the output looks like below.

 

Angular 6 Material Example Tutorial For Beginners

Finally, Angular Material Example Tutorial From Scratch is over. Thanks for taking.

Leave A Reply

Your email address will not be published.

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