How to showcase a basic alert dialog using Material Angular

Question

How to showcase a basic alert dialog using Material Angular

I'm currently utilizing Material Angular (found on Angular Material). However, I have noticed that the examples provided on the website appear to be overly complex. Additionally, most tutorials available online are either outdated or they focus on using AngularJS instead of the latest version. Is there a simple way for me to display a basic alert similar to Android's AlertDialog? This alert should include a title, a message, and options for confirming or canceling.

angular typescript angular-material2

Answer 1

Answer №1

UPDATE:

A convenient way to handle dialogs in your Angular component is by using a template reference in the HTML file and passing it to the MatDialog#open method in the TypeScript file.

Another approach is to access the template reference in the component view and pass it to a custom method that accepts the reference.

To better understand, refer to the code snippet below where two dialog examples are demonstrated:

(Assuming the following project structure)

app/
  app.component.html
  app.component.ts

app.component.html:

<button mat-button (click)="openDialogWithRef(firstDialog)">Open dialog with reference</button>
<button mat-button (click)="openOtherDialog()">Open dialog programmatically</button>

<ng-template #firstDialog>
  <h2 matDialogTitle>Hello, world!</h2>
  <p matDialogContent><em>Content for this dialog goes here...</em></p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>
</ng-template>

<ng-template #secondDialog>
  <h2 matDialogTitle>Hello, second dialog!</h2>
  <p matDialogContent>This template reference was accessed using <code>@ViewChild</code>, allowing querying of components/template references in the component view.</p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>

app.component.ts (condensed):

import { ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

// ...
export class AppComponent {
  @ViewChild('secondDialog') secondDialog: TemplateRef<any>;

  constructor(private dialog: MatDialog) { }

  openDialogWithRef(ref: TemplateRef<any>) {
    this.dialog.open(ref);
  }

  openOtherDialog() {
    this.dialog.open(this.secondDialog);
  }
}

This streamlined method eliminates the need for creating new components solely for dialogs, as well as declaring them in the entryComponents section of your module.

However, managing multiple dialog templates within a single component view may become cumbersome.

Original solution

For your specific requirement, consider the example provided below:

(Assuming the directory structure as detailed)

app/
  my-alert-dialog/
    my-alert-dialog.component.html
    my-alert-dialog.component.ts
  app.component.ts
  app.module.ts

my-alert-dialog.component.html

<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
  <p>Upon unregistering, all stored data will be deleted. Confirm action?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that any content can be passed to `matDialogClose` including objects or arrays.
    Ensure to bind them using property binding like so [matDialogClose]="{'status': 'confirm'}"
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

Detailed explanation of the above code:

[matDialogTitle] / [mat-dialog-title]: Directive used typically on an h2 element to specify the dialog's title.
[matDialogContent] / [mat-dialog-content] / mat-dialog-content: Directive denoting the content of the dialog.
[matDialogActions] / [mat-dialog-actions] / mat-dialog-actions: Directive indicating the dialog's actions.
[matDialogClose] / [mat-dialog-close]: Directive often applied on a button element to close the dialog when clicked. It can include a parameter (of type any) which is then passed back to the dialog opener.

my-alert-dialog.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-alert-dialog', // Customize as needed
  templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }

app.component.ts (excerpt)

import { MatDialog } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent {
  constructor(private dialog: MatDialog) { }
  unregister() {
    let dialogRef = this.dialog.open(MyAlertDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      if (result == 'confirm') {
        console.log('Unregistered');
      }
    })
  }
}

app.module.ts (excerpt)

import { MatDialogModule } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';

@NgModule({
  declarations: [
    // ...
    MyAlertDialogComponent
  ],
  imports: [
    // ...
    MatDialogModule
  ],
  entryComponents: [
    // Additional information at https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code-
    MyAlertDialogComponent
  ]
})
export class AppModule { }

Live Demo

Answer 2

UPDATE:

A convenient way to handle dialogs in your Angular component is by using a template reference in the HTML file and passing it to the MatDialog#open method in the TypeScript file.

Another approach is to access the template reference in the component view and pass it to a custom method that accepts the reference.

To better understand, refer to the code snippet below where two dialog examples are demonstrated:

(Assuming the following project structure)

app/
  app.component.html
  app.component.ts

app.component.html:

<button mat-button (click)="openDialogWithRef(firstDialog)">Open dialog with reference</button>
<button mat-button (click)="openOtherDialog()">Open dialog programmatically</button>

<ng-template #firstDialog>
  <h2 matDialogTitle>Hello, world!</h2>
  <p matDialogContent><em>Content for this dialog goes here...</em></p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>
</ng-template>

<ng-template #secondDialog>
  <h2 matDialogTitle>Hello, second dialog!</h2>
  <p matDialogContent>This template reference was accessed using <code>@ViewChild</code>, allowing querying of components/template references in the component view.</p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>

app.component.ts (condensed):

import { ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

// ...
export class AppComponent {
  @ViewChild('secondDialog') secondDialog: TemplateRef<any>;

  constructor(private dialog: MatDialog) { }

  openDialogWithRef(ref: TemplateRef<any>) {
    this.dialog.open(ref);
  }

  openOtherDialog() {
    this.dialog.open(this.secondDialog);
  }
}

This streamlined method eliminates the need for creating new components solely for dialogs, as well as declaring them in the entryComponents section of your module.

However, managing multiple dialog templates within a single component view may become cumbersome.

Original solution

For your specific requirement, consider the example provided below:

(Assuming the directory structure as detailed)

app/
  my-alert-dialog/
    my-alert-dialog.component.html
    my-alert-dialog.component.ts
  app.component.ts
  app.module.ts

my-alert-dialog.component.html

<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
  <p>Upon unregistering, all stored data will be deleted. Confirm action?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that any content can be passed to `matDialogClose` including objects or arrays.
    Ensure to bind them using property binding like so [matDialogClose]="{'status': 'confirm'}"
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

Detailed explanation of the above code:

[matDialogTitle] / [mat-dialog-title]: Directive used typically on an h2 element to specify the dialog's title.
[matDialogContent] / [mat-dialog-content] / mat-dialog-content: Directive denoting the content of the dialog.
[matDialogActions] / [mat-dialog-actions] / mat-dialog-actions: Directive indicating the dialog's actions.
[matDialogClose] / [mat-dialog-close]: Directive often applied on a button element to close the dialog when clicked. It can include a parameter (of type any) which is then passed back to the dialog opener.

my-alert-dialog.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-alert-dialog', // Customize as needed
  templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }

app.component.ts (excerpt)

import { MatDialog } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent {
  constructor(private dialog: MatDialog) { }
  unregister() {
    let dialogRef = this.dialog.open(MyAlertDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      if (result == 'confirm') {
        console.log('Unregistered');
      }
    })
  }
}

app.module.ts (excerpt)

import { MatDialogModule } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';

@NgModule({
  declarations: [
    // ...
    MyAlertDialogComponent
  ],
  imports: [
    // ...
    MatDialogModule
  ],
  entryComponents: [
    // Additional information at https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code-
    MyAlertDialogComponent
  ]
})
export class AppModule { }

Live Demo

Answer 3

Answer №2

Recently, I implemented a Sweet Alert in my Angular project. If you're interested, you can check out the tutorial that helped me at .

This method is incredibly simple and efficient for creating alerts within an Angular application.

$ npm install --save sweetalert2

To start using Sweet Alert, add import Swal from 'sweetalert2'; to your TypeScript file and then create an alert with

Swal.fire('This is a simple and pleasant alert')

.

Answer 4

Recently, I implemented a Sweet Alert in my Angular project. If you're interested, you can check out the tutorial that helped me at .

This method is incredibly simple and efficient for creating alerts within an Angular application.

$ npm install --save sweetalert2

To start using Sweet Alert, add import Swal from 'sweetalert2'; to your TypeScript file and then create an alert with

Swal.fire('This is a simple and pleasant alert')

.

Answer 5

Answer №3

To set up, execute the command npm i @angular/material, then create a new dialog component named EmployeeDialog.

If you wish to include a table and a close button in the dialog, follow these instructions.

In your EmployeeDialog.html file, add the following code:

<div md-dialog-content>
<!-- Close button for the dialog -->
<button class="close" mat-button (click)="onNoClick()">
 <mat-icon>close</mat-icon>   
</button>   
<div>   
 <table>
   <th>Id</th><th>Name</th>Addess<th></th><
   <tr *ngFor="let emp of emplyee; let i = index" border="1">
     <td>{{emp.DeviceID}}</td>
     <td>{{emp.FriendlyName}}</td>
   </tr>
 </table>   
</div>   
</div>

Your EmployeeDialog.ts file should contain the following code:

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export class EmployeeDialog implements OnInit {

  constructor(public dialogRef: MatDialogRef<EmployeeDialog>, @Inject(MAT_DIALOG_DATA) public data: any){ }
  
  //write code to handle close
  }
}

To open the EmployeeDialog from the SourceComponent, call the Employeelist() function as shown below:

SourceComponent.ts file

public Employeelist()
{
    const dialogRef = this.dialog.open(EmployeeDialog, {
    width: '80%',
    height:'80%',
    panelClass: 'my-dialog',
    disableClose: true ,
    data: employeeList
  });
}

Add the following code to your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeDialog,
    SourceComponent,
  ],
  imports: [
    MatDialogModule,
    MatButtonModule,
    BrowserModule,
  ],
  entryComponents: [EmployeeDialog],
  bootstrap: [ AppComponent ],
  providers: []
})
export class AppModule { }

Answer 6

To set up, execute the command npm i @angular/material, then create a new dialog component named EmployeeDialog.

If you wish to include a table and a close button in the dialog, follow these instructions.

In your EmployeeDialog.html file, add the following code:

<div md-dialog-content>
<!-- Close button for the dialog -->
<button class="close" mat-button (click)="onNoClick()">
 <mat-icon>close</mat-icon>   
</button>   
<div>   
 <table>
   <th>Id</th><th>Name</th>Addess<th></th><
   <tr *ngFor="let emp of emplyee; let i = index" border="1">
     <td>{{emp.DeviceID}}</td>
     <td>{{emp.FriendlyName}}</td>
   </tr>
 </table>   
</div>   
</div>

Your EmployeeDialog.ts file should contain the following code:

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export class EmployeeDialog implements OnInit {

  constructor(public dialogRef: MatDialogRef<EmployeeDialog>, @Inject(MAT_DIALOG_DATA) public data: any){ }
  
  //write code to handle close
  }
}

To open the EmployeeDialog from the SourceComponent, call the Employeelist() function as shown below:

SourceComponent.ts file

public Employeelist()
{
    const dialogRef = this.dialog.open(EmployeeDialog, {
    width: '80%',
    height:'80%',
    panelClass: 'my-dialog',
    disableClose: true ,
    data: employeeList
  });
}

Add the following code to your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeDialog,
    SourceComponent,
  ],
  imports: [
    MatDialogModule,
    MatButtonModule,
    BrowserModule,
  ],
  entryComponents: [EmployeeDialog],
  bootstrap: [ AppComponent ],
  providers: []
})
export class AppModule { }

How to showcase a basic alert dialog using Material Angular

Answer №1

Answer №2

Answer №3

Similar questions

Is data binding not functioning properly in Angular 8?

Parsing temporary storage of database query results

Adjusting the selection in the Dropdown Box

Obtaining the initial successful value within an array containing TaskEithers

Tips for effectively utilizing the Angular 14 inject function while setting multi to true

What is the best way to distribute a Typescript module across multiple projects without having to duplicate it each time?

Converting a string into a Date in Typescript while disregarding the timezone

Encountered a problem while integrating Flickity Events with Vue3 and TypeScript: receiving an error stating that "this$refs.flickity.on

Utilize a Typescript library within a separate Typescript library

The Nestjs ClientMqtt now has the capability to publish both pattern and data to the broker, as opposed to just sending

Numerous Angular projects nestled neatly within one single overarching project

Angular 5 does not recognize the function submitEl.triggerEventHandler, resulting in an error

What is the best way to incorporate TypeScript variables into CSS files?

Attempting to implement ngModel in Angular for an HTML element

Issue with running Angular Application through docker-compose.yml file is stopping the execution

Pausing until all RxJS calls are completed before moving on to the next block of code

Blend a standard `Record` with a fixed entity

VS code shines a spotlight on Jasmine functions within Angular 6

The transition() function in Angular 2.1.0 is malfunctioning

Getting node siblings within an Angular Material nested tree: A comprehensive guide