Dialog Box in Angular

To create a (modal) dialog box in Angular, you can use a library like Angular Material, which provides ready-to-use components including modals. Below is a simple example of how to create a dialog using Angular Material.

Make sure you have installed Angular Material in your project before starting. You can install using the following command:

ng add @angular/material

Below is an example of how to create a basic dialog using Angular Material.

Import the required modules

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { AppComponent, DialogContentComponent } from './app.component';

@NgModule({
   declarations: [
     AppComponent,
     DialogContentComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatButtonModule,
     MatDialogModule
   ],
   bootstrap: [AppComponent],
})
export class AppModule {}

Create the dialog component

// app.component.ts
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
   selector: 'app-root',
   template: `
     <button mat-raised-button (click)="openDialog()">Open Dialog</button>
   `,
})

export class AppComponent {
   constructor(public dialog: MatDialog) {}

   openDialog(): void {
     const dialogRef = this.dialog.open(DialogContentComponent, {
       width: '250px',
       data: { message: 'This is an example of dialogue.' }
     });

     dialogRef.afterClosed().subscribe(result => {
       console.log('Dialogue closed', result);
     });
   }
}

@Component({
   selector: 'app-dialog-content',
   template: `
     <h2>{{ data.message }}</h2>
     <button mat-button (click)="onNoClick()">Close</button>
   `,
})
export class DialogContentComponent {
   constructor(
     public dialogRef: MatDialogRef<DialogContentComponent>,
     @Inject(MAT_DIALOG_DATA) public data: { message: string }
   ) {}

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

   }

}

Style the application (optional)

Add some styling to make your app look better.

/* styles.css */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

html, body {
   height: 100%;
   margin: 0;
   font-family: Roboto, 'Helvetica Neue', sans-serif;
}

body {
   display: flex;
   align-items: center;
   justify-content: center;
}

This is a basic example of how to create a dialog box in Angular using Angular Material. Remember to adjust the code as needed based on your application's specific requirements.