AppDividend
Latest Code Tutorials

Angular 8 Material Example Tutorial For Beginners

5

Angular 8 Material Example Tutorial From Scratch is today’s leading topic.  We use Angular 8 CLI to generate a new Angular project and Angular Material 8 library 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 8 Material Example

Content Overview

If you don’t know about Angular 8 then check out: Angular 8 CRUD Tutorial.

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

Step 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

Step 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"
]

Step 3: Create a Custom Material Module File.

Okay, now inside the 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 the future if we need it.

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.

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

Step 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 8 Material Example Tutorial For Beginners is over. Thanks for taking it.

See Also

Angular 8 Material Table Example

Angular modal example

Angular material icon example

5 Comments
  1. charles says

    thanks

  2. Jiri says

    Thank you, short, sweet and to the point. Easy to follow example that works, well done

  3. Jeff says

    Thanks, well done.

  4. LMM says

    Thanks! It’s exactly what I was looking for: easy to follow, no bs.

  5. maosn says

    thanks

Leave A Reply

Your email address will not be published.

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