Welcome folks today in this blog post we will be showing list
data in material dialog
popup window on button click in Browser using TypeScript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new angular
project using the below command as shown below
ng new sampleproject
cd sampleproject
And now you need to install the below libraries
using the below command
npm i @angular/material
And now you will be seeing the below directory
structure of the angular app as shown below
Now you need to go to app.module.ts
file and copy paste the following code
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { MatDialogModule } from '@angular/material/dialog'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, MatDialogModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Now you need to to go app.component.html
file and copy paste the following code
app.component.html
1 2 3 4 5 6 7 8 9 |
<button mat-button (click)="openTempDialog()">Open Temp Modal</button> <ng-template #dialogRef let-mydata> <h5>Hi I am Template Dialog following Foo list:</h5> <ul *ngIf="mydata"> <li *ngFor="let item of mydata">{{item}}</li> </ul> <button mat-button mat-dialog-close="I am from dialog land...">Close</button> </ng-template> |
As you can see we have the button
where we have binded onclick
event handler where we are executing the openTempDialog()
method inside the app.component.ts
file
app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Component, TemplateRef, ViewChild } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-material-dialog-app'; @ViewChild('dialogRef') dialogRef!: TemplateRef<any>; myFooList = ['Some Item', 'Item Second', 'Other In Row', 'What to write', 'Blah To Do'] constructor(public dialog: MatDialog) { } openTempDialog() { const myTempDialog = this.dialog.open(this.dialogRef, { data: this.myFooList }); myTempDialog.afterClosed().subscribe((res) => { // Data back from dialog console.log({ res }); }); } } |
As you can see inside the method we are showing the popup
dialog window on button click so we will be showing the list
data inside the dialog box.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
openTempDialog() { const myCompDialog = this.dialog.open(this.dialogRef, { data: this.myFooList,panelClass: 'fullscreen-dialog', height: '100vh', width: '100%' }); myCompDialog.afterOpened().subscribe((res) => { // Trigger After Dialog Opened console.log('After Opened', { res }); }); myCompDialog.beforeClosed().subscribe((res) => { // Trigger Before Dialog Closed console.log('Before Closed', { res }); }); myCompDialog.afterClosed().subscribe((res) => { // Trigger After Dialog Closed console.log('After Closed', { res }); }); } |