Dialog using Angular Material

 

In My last article i discussed on how to implement SnackBar Modal in our application using angular material. In these article I discuss on How to open Dialog using Angular material.
We need to use “MatDialog” Service displaying modal type dialog with animation effect.
First we need to import “MatDialogModule” in app.module.ts file.


.................
//we need to import first MatDialogModule From Material.
import {MatDialogModule} from '@angular/material/dialog';
...................
@NgModule({
  .........
  imports: [
                MatDialogModule,
            ...
           ]
})
export class AppModule(){}

After importing code we can use this service in any component.


For open Dialog by calling the open method with a component to be loaded and an optional config object.
These open method will return an instance of MatDialogRef.Display in below example.


let basicDialogRef = dialog.open(BasicComponent, {
  height: '400px',
  width: '600px',
});

Above example gives the reference MatDialogRef in basicDialogRef so we can now use that reference for close dialog,Get value of the dialog.


//get Subscribe value,

basicDialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`);
});

//Close Dialog
dialogRef.close('Closed');

MatDialog Services Methods.

Method Name Description Parameters Return
closeAll It closes all currently opened.
getDialogById It open particular ID dialog  id – string It returns MatDialogRef
open It open modal dialog containing the given component.

componentOrTemplateRef: we can pass component or template reference.

Config: Extra configuration options.

It returns MatDialogRef<T,R>



Example of Dialog.


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

export interface DialogData {
  name: string;
}


@Component({
  selector: 'dialog-sample-example',
  templateUrl: 'dialog-sample-example.html'
})
export class DialogSampleExample {


  name: string;

  constructor(public dialog: MatDialog) {}

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

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.name = result;
    });
  }

}

@Component({
  selector: 'dialog-sample-example-dialog',
  templateUrl: 'dialog-sample-example-dialog.html',
})
export class DialogSampleExampleDialog {

  constructor(
    public dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}


<ul>
  <li>
    <button mat-raised-button (click)="openDialog()">Open Dialog</button>
  </li>
  <li *ngIf="name">
    Your Name: <i>{{name}}</i>
  </li>
</ul>


<div mat-dialog-content>
  <p>What's your Name</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.name">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.name" cdkFocusInitial>Ok</button>
</div>


Output Display in Below Video.

Spread the love
  • 31
  •  
  •  
  •  
  • 4
  •  
  • 1
  •  
  •