Angular 14 Project to Show List Data in Material Dialog Popup Window on Button Click in TypeScript

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

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 { }

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

<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>

<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>

<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

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 });
    });
  }
}

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.

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 });
    });
  }

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 });

});

}