Wednesday, July 8, 2020
therichposts@gmail.com
Angular 9MaterialAngularPhp

Angular 9 Material Datatable open Material Dialog on row button click event functionality

Angular 9 Material Datatable open Material Dialog on button click event functionality
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Material Datatable open Material Dialog on row button click event functionality.

Angular 9 Material Datatable open Material Dialog on button click event functionality
Angular 9 Material Datatable open Material Dialog on button click event functionality

In this post,

I will show you, how we can open Material Dialog when we click on Angular Material Datatable button click.

In last post, I showed, how we can show php mysql data into our Angular 9 material datatables and here is that post link, with this, you can connect with php mysql database and get the data.

Here is complete code for open Material Dialog and rest of code, you can get it from my last blog post and i have share the link above:

1. Here is the code, you need to add into your app.module.ts file:

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

imports: [
   ...
  MatDialogModule,
  MatButtonModule,
    ...
  ],

2. You need to add below code into your app.component.ts file:

...
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
...

export class AppComponent {
...
name:string;


getRecord(name): void
  {
    this.name = name;
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '450px',
    data: {name: this.name}
    });

    
  }
...
}
...
export interface DialogData {
 
  name: string;
}
@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
  styleUrls: ['app.component.css']
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

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

}

3. Here is the complete code you just need to replace into to your app.component.html file:

<div class="mat-elevation-z8">

  <table mat-table [dataSource]="dataSource">

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let post"> {{post.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="firstname">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let post"> {{post.firstname}} </td>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let post"> {{post.email}} </td>
    </ng-container>
  
  <!-- Get Details -->
    <ng-container matColumnDef="getdetails">
      <th mat-header-cell *matHeaderCellDef> Ger Details </th>
      <td mat-cell *matCellDef="let post"> <button mat-raised-button color="accent" (click)="getRecord(post.firstname)">Get Details</button> </td>
    </ng-container>

   

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let post; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

4. You also need to create new file name dialog-overview-example-dialog inside app/src folder and here is dialog-overview-example-dialog file code:

<h1 mat-dialog-title>Welcome : {{data.name}}</h1>
<div mat-dialog-actions>
  <button mat-button class="mat-focus-indicator mat-raised-button mat-button-base mat-raised" (click)="onNoClick()">Close!!</button>
</div>

Again I am saying, for stating code, you just need to check my last post and I have also shared the post link on above.

jassa

thank you

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.