Display a simple alert dialog in Material Angular

I had used a sweet Alert. https://www.freakyjolly.com/angular-sweetalert2-tutorial/#.X2nNxmgzZPY

It´s the most easy and fast method to create alerts in angular.

$ npm install --save sweetalert2

Use import Swal from 'sweetalert2'; in your TS file together with the Alert Swal.fire('This is a simple and sweet alert')

EDIT:

You could also use a template reference in your component's HTML file (or more commonly known as a "component view") and then reference it in your component's TypeScript file and then pass that reference to MatDialog#open.

Alternatively, you can access a reference of the template in your component's view and then pass it to a method you defined that accepts the reference.

If you're confused with what I just typed out, check out the code below (the first dialog demonstrates the first sentence and the second dialog showcases what I explained in the second sentence)

(Assuming the following structure once again)

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 in code</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>Interesting note: This template reference was referenced in code with the <code>@ViewChild</code>, which lets you query 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 (shortened):

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 method can save you some hassle in creating new components just for dialogs, as well as declaring them in your module's entryComponents.

However, this can quickly become troublesome if you have multiple dialog templates in a single component view.

---

Original answer

Here's a simple example as you requested:

(Assuming the following structure)

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>When you unregister, all your data will be removed. Continue?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that you can pass in anything to the `matDialogClose` attribute. This also includes objects, arrays, etc.
    Just make sure that you make it a property binding with those [] brackets
    Example: <button mat-button [matDialogClose]="{'lol': true}">Cancel</button>
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

Explanation of the above code:

• [matDialogTitle] / [mat-dialog-title]: A directive (typically used on a h2 element) for indicating the dialog's title.
• [matDialogContent] / [mat-dialog-content] / mat-dialog-content: A directive indicating the dialog's content.
• [matDialogActions] / [mat-dialog-actions] / mat-dialog-actions: A directive indicating the dialog's action(s).
• [matDialogClose] / [mat-dialog-close]: A directive (typically used on a button element) indicating that this element when clicked on should close the dialog. Optionally, this directive can include a parameter (of any type) which can be then passed to the component who opened this dialog.

my-alert-dialog.component.ts

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

@Component({
  selector: 'app-alert-dialog', // Replace with your own selector
  templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }

app.component.ts (redacted)

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 => {
      // NOTE: The result can also be nothing if the user presses the `esc` key or clicks outside the dialog
      if (result == 'confirm') {
        console.log('Unregistered');
      }
    })
  }
}

app.module.ts (redacted)

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

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

---

Demo

Install npm i @angular/material, add component for dialog, example EmployeeDialog.

Suppose you want table in dialog also close button on top right.

EmployeeDialog.html file code

<div md-dialog-content>
<!-- This button to close 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 be

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

Now if you want to open EmployeeDialog from SourceComponent, whenever Employeelist() function call you diaglog will open

SourceComponent.ts file

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

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