AppDividend
Latest Code Tutorials

Angular 12 Material Example: Everything You Need to Know

Angular Material is a material library that we need to install for better UI/UX.  We will use the Angular 12 and Angular Material 12 library. Angular Material is ground running with large, modern UI components that work across the web, mobile, and desktop. 

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 12 Material Example

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.

We use Angular CLI to generate a new Angular project and Angular Material 9 library for this demo. If you don’t know about Angular, then check out: Angular CRUD Tutorial.

First, we need to install an Angular. 

We are using Angular CLI to install the Angular. Right now, Angular  9 is the latest. So if you have not installed Angular CLIthen install it using the following command.

Steps to setup Angular Material

  1. Install Angular CLI
  2. Install all the dependencies related to Angular Material.
  3. Create a custom angular module file.
  4. Import prebuilt themes and icons.
  5. Import required material components in material.module.ts file.

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 prebuilt theme and Material icons

Angular Material comes with some prebuilt 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 the Angular Framework.

Step 5: Import the required material Components.

Let us add a text input inside our application but, 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, we need the following angular material modules.

  1. MatMenuModule
        2. MatToolbarModule

 

We can also import the Angular Material Icons for thatSo 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

That’s it for this tutorial. Thanks for taking it.

See Also

Angular Material Table

Angular Modal Example

Angular Material Icon

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.