Angular Material Tutorial

You are currently viewing Angular Material Tutorial

Angular Material Tutorial

Angular Material is a UI component library for Angular applications that provides a wide variety of pre-built, reusable UI components following Material Design principles. In this tutorial, we’ll go through the steps to set up Angular Material in an Angular project and explore some of the commonly used components.

Table of Contents

  1. Installation
  2. Importing Angular Material Modules
  3. Using Angular Material Components
  4. Theming
  5. Conclusion
  6. Additional Resources

1. Installation

To use Angular Material in your Angular project, you’ll need to install Angular Material and Angular CDK (Component Dev Kit) via npm:

npm install @angular/material @angular/cdk

You also need to install Angular animations for certain components:

npm install @angular/animations

2. Importing Angular Material Modules

Once installed, you’ll need to import the necessary Angular Material modules in your Angular application module (app.module.ts).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatInputModule,
    MatDialogModule,
    MatSnackBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In this example, we’ve imported modules for Buttons (MatButtonModule), Input Fields (MatInputModule), Dialogs (MatDialogModule), and Snackbar (MatSnackBarModule). You can import more modules as needed for your application.

3. Using Angular Material Components

Buttons

Angular Material provides various button styles and configurations. Here’s an example of using a Material button:

<!-- app.component.html -->

<button mat-button>Click me!</button>

Input Fields

Angular Material provides styled input fields. Here’s an example of a Material input field:

<!-- app.component.html -->

<mat-form-field>
  <input matInput placeholder="Enter your name">
</mat-form-field>

Dialogs

Dialogs are modal pop-up windows used for user interactions. Here’s an example of opening a Material dialog:

// app.component.ts

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MyDialogComponent } from './my-dialog/my-dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(MyDialogComponent, {
      width: '250px',
      data: { name: 'John' }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog closed with result:', result);
    });
  }
}

And the dialog component:

// my-dialog/my-dialog.component.ts

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
})
export class MyDialogComponent {

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }

}
<!-- my-dialog/my-dialog.component.html -->

<h1 mat-dialog-title>Hello</h1>
<div mat-dialog-content>
  Hello, {{ data.name }}!
</div>
<button mat-button mat-dialog-close>Close</button>

Snackbar

Snackbar is used to show a small notification at the bottom of the screen. Here’s an example of showing a Material snackbar:

// app.component.ts

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private snackBar: MatSnackBar) {}

  openSnackBar(message: string, action: string) {
    this.snackBar.open(message, action, {
      duration: 2000,
    });
  }
}

And call it from a button click:

<!-- app.component.html -->

<button mat-button (click)="openSnackBar('Hello', 'Close')">Show Snackbar</button>

4. Theming

Angular Material allows you to customize the theme of your application. You can create a custom theme file (styles.scss or similar) and import it into your angular.json:

// angular.json

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css",
              "src/custom-theme.scss" // Your custom theme file
            ],
          }
        }
      }
    }
  }
}

In your custom theme file, you can define your theme colors, typography, etc.

5. Conclusion

Angular Material provides a wide range of pre-built, customizable UI components that follow Material Design principles. In this tutorial, we covered the basics of setting up Angular Material in an Angular project and using some common components like buttons, input fields, dialogs, and snackbar.

As you explore Angular Material further, you’ll find many more components and customization options available. Refer to the official Angular Material documentation for a complete list of components and detailed usage instructions.

6. Additional Resources

Leave a Reply