Related Articles

Related Articles

How to use Mat-Dialog in Angular ?
  • Difficulty Level : Expert
  • Last Updated : 26 Oct, 2020

Introduction:
Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it.

Installation syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

ng add @angular/material

chevron_right


    Approach:

  • First we need to import ‘MatDialog’ from ‘@angular/material/dialog’ and we need to create an instance for it in the constructor.
  • Using this instance we can open the dialog box component.
  • Now create a separate component for the dialog and write code as per the requirements.
  • In the dialog component, we need to create an instance of  ‘MatDialogRef’ which we should import from ‘@angular/material/dialog’.
  • Import ‘MatDialogModule’ from ‘@angular/material’ in app.module.ts file.
  • Make sure that you are mentioning the Dialog component in entryComponents array in the module file.

Implementation of code: app.component.html:

filter_none

edit
close

play_arrow

link
brightness_4
code

<button mat-raised-button (click)="openDialog()">
    Pick one
</button>
<br>
  
<span *ngIf="animal">
    You choose: <i>{{animal}}</i>
<span>

chevron_right


app.component.ts:



filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
  
import { ExampleDialogComponent } from './example-dialog';
  
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  
  animal: string;
  name: string;
  
  constructor(public dialog: MatDialog) {}
  
  openDialog(): void {
    let dialogRef = this.dialog.open(ExampleDialogComponent, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });
  
    dialogRef.afterClosed().subscribe(result => {
      this.animal = result;
    });
  }
  
}

chevron_right


app.module.ts:

filter_none

edit
close

play_arrow

link
brightness_4
code

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatCommonModule,
  MatFormFieldModule,
  MatInputModule,
} from '@angular/material';
  
import { AppComponent } from './example.component';
import { ExampleDialogModule } from './example-dialog';
  
@NgModule({
  declarations: [AppComponent],
  exports: [AppComponent],
  imports: [
    ExampleDialogModule,
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatCommonModule,
    MatFormFieldModule,
    MatInputModule,
  ],
})
export class AppModule {}

chevron_right


example-dialog.component.html:

filter_none

edit
close

play_arrow

link
brightness_4
code

<h1 mat-dialog-title>Welcome user</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onCancel()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" 
             cdkFocusInitial>Ok</button>
</div>

chevron_right


example-dialog.component.ts:

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  
@Component({
  selector: 'app-example-dialog',
  templateUrl: 'example-dialog.component.html',
})
export class ExampleDialogComponent {
  
  constructor(
    public dialogRef: MatDialogRef<ExampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }
  
  onCancel(): void {
    this.dialogRef.close();
  }
  
}

chevron_right


example-dialog.module.ts:

filter_none

edit
close

play_arrow

link
brightness_4
code

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatCommonModule,
  MatDialogModule,
  MatFormFieldModule,
  MatInputModule,
} from '@angular/material';
  
import { ExampleDialogComponent } from './example-dialog.component';
  
@NgModule({
  declarations: [ExampleDialogComponent],
  entryComponents: [ExampleDialogComponent],
  imports: [
    FormsModule,
    MatButtonModule,
    MatCommonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
  ],
})
export class ExampleDialogModule {}

chevron_right


Output:

Output when the dialog box is opened:

Output when the entered value is displayed on the screen:




My Personal Notes arrow_drop_up
Recommended Articles
Page :