Angular Material Dialog in Same Component with ng-template
November 09, 2022
On this page we will learn to create Material Dialog using ng-template
.
1. The
MatDialog
service is used to open Material Design modal dialogs.
2. A Dialog can be created either by creating a component or by using
<ng-template>
in dialog opener component.
3. To create Dialog, we need to import following module in our application module.
import { MatDialogModule } from '@angular/material/dialog';
ng-template
in detail.
Technologies Used
Find the technologies being used in our example.1. Angular 13.1.0
2. Angular Material 13.3.9
3. Node.js 12.20.0
4. NPM 8.2.0
Creating Dialog with <ng-template>
Find the HTML template code to create dialog with <ng-template>
.
<ng-template let-data #myCityDialog> <h2 mat-dialog-title> Heading </h2> <div mat-dialog-content> Content </div> <div mat-dialog-actions> <button mat-button mat-dialog-close>Close</button> </div> </ng-template>
mat-dialog-content : Scrollable content for dialog.
mat-dialog-actions : Container for action buttons at the bottom of the dialog.
mat-dialog-close : Used with
<button>
. It makes the button close the dialog with an optional result from the bound value.
Now look into the line of code.
<ng-template let-data #myCityDialog>
myCityDialog : Template reference used to access template by
@ViewChild
decorator.
To open dialog, we can create a button in same HTML template.
<button mat-raised-button (click)="openCityDialog()">Pick user</button>
Open Dialog
1. CreateTemplateRef
instance using @ViewChild
decorator.
@ViewChild('myCityDialog') cityDialog = {} as TemplateRef<User>;
open
method of MatDialog
service.
MatDialog.open
arg1 : ComponentType<T> | TemplateRef<T>
arg2?: MatDialogConfig<D>
Returns:
MatDialogRef<T, R>
Find the code snippet of TypeScript file.
constructor(public dialog: MatDialog) { } openCityDialog() { this.dialogRef = this.dialog.open(this.cityDialog, { data: this.user, height: '350px', width: '250px' }); this.dialogRef.afterClosed().subscribe((result: User) => { console.log('The City dialog was closed.'); console.log(result?.name + ' - ' + result?.city); }); }
afterClosed
method.
4. To close Dialog, use
MatDialogRef.close()
method.
onCancelCityDialog() { this.dialogRef.close(); }
Complete Example
In our example, we are creating two dialogs usingng-template
. One dialog is taking input from user and sending it back to opener. Second dialog is just displaying message.
example-dialog.component.html
<h2>Dialog Demo</h2> <p> <button mat-raised-button (click)="openCityDialog()">Pick user</button> <br /> {{user.name}} <br /> {{user.city}} </p> <p> <button mat-raised-button (click)="openInfoDialog()">Info</button> </p> <ng-template let-data #myCityDialog> <h2 mat-dialog-title>User Detail</h2> <div mat-dialog-content> <p>Name: <mat-form-field appearance="fill"> <input matInput [(ngModel)]="data.name" placeholder="Enter name"> </mat-form-field> </p> <p>City: <mat-form-field appearance="fill"> <input matInput [(ngModel)]="data.city" placeholder="Enter city"> </mat-form-field> </p> </div> <div mat-dialog-actions> <button mat-button (click)="onCancelCityDialog()">Cancel</button> <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button> </div> </ng-template> <ng-template let-data #myInfoDialog> <h2 mat-dialog-title>Information</h2> <div mat-dialog-content> {{data}} </div> <div mat-dialog-actions> <button mat-button mat-dialog-close>Close</button> </div> </ng-template>
import { Component, TemplateRef, ViewChild } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { User } from './user'; @Component({ selector: 'example-dialog', templateUrl: './example-dialog.component.html', }) export class ExampleDialogComponent { user = { name: '', city: '' }; dialogRef: any; @ViewChild('myCityDialog') cityDialog = {} as TemplateRef<User>; @ViewChild('myInfoDialog') infoDialog = {} as TemplateRef<string>; constructor(public dialog: MatDialog) { } openCityDialog() { this.dialogRef = this.dialog.open(this.cityDialog, { data: this.user, height: '350px', width: '250px' }); this.dialogRef.afterClosed().subscribe((result: User) => { console.log('The City dialog was closed.'); console.log(result?.name + ' - ' + result?.city); }); } onCancelCityDialog() { this.dialogRef.close(); } myInfo = "Namaste to the world!"; openInfoDialog() { this.dialogRef = this.dialog.open(this.infoDialog, { data: this.myInfo, height: '200px', width: '250px' }); this.dialogRef.afterClosed().subscribe(() => { console.log('The Info dialog was closed.'); }); } }
export interface User { name: string; city: string; }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<example-dialog></example-dialog>` }) export class AppComponent { }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatButtonModule } from '@angular/material/button'; import { MatInputModule } from '@angular/material/input'; import { MatDialogModule } from '@angular/material/dialog'; import { AppComponent } from './app.component'; import { ExampleDialogComponent } from './example-dialog.component'; @NgModule({ declarations: [ AppComponent, ExampleDialogComponent ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatButtonModule, MatInputModule, MatDialogModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
