Home Angular 8 Angular material data table with custom button click event functionality

Angular material data table with custom button click event functionality

by therichpost
Published: Last Updated on 5 comments
Angular material data table with custom button click event functionality

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular material data table with custom button click event functionality.

Please check the first part of this post : Angular material data table working example

Angular material data table with custom button click event functionality
Angular Material Datatable with custom button(Get Details)
Angular material data table with custom button click event functionality open alert with row data
Open Alert with row data after get details button click an
Angular Material Datatable

Post Working

In this post, I am working with material angular datatable with custom button and when I will click on that custom button then I will get popup alert with dynamic row data.

Guy’s Angular 12 came and if you are new in Angular 12 then please check below links:

  1. Angular 12 Tutorials
  2. Angular Free Templates

Here is the working code snippet and please follow carefully:

1. Here are the basics commands to install angular 11 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

$ cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below command to add @angular/material into your angular 8 application:

ng add @angular/material

3. Now you need to add below code into your src/app/app.module.ts file:

...
import {  MatTableModule } from '@angular/material/table';
import {  MatPaginatorModule } from '@angular/material/paginator';
import {  MatButtonModule } from '@angular/material/button'


@NgModule({
 ...
  imports: [
    ...
    MatPaginatorModule,
    MatTableModule,
    MatButtonModule
   
  ],

4. Now you need to add below code into your src/app/app.component.ts file:

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', "getdetails"];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }
  getRecord(name)
  {
    alert(name);
  }
}
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

5. Now you need to add below code into src/app/app.component.html file:

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

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

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

    <!-- Get Details -->
    <ng-container matColumnDef="getdetails">
      <th mat-header-cell *matHeaderCellDef> Details </th>
      <td mat-cell *matCellDef="let element"> <button mat-raised-button color="primary" (click)="getRecord(element.name)">Get Details</button> </td>
    </ng-container>

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

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

6. Now you need to add below code into src/app/app.component.css file:

table {width: 100%;}

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding please watch the above video.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thank you.

You may also like

5 comments

Waqas July 9, 2020 - 8:32 pm

Thanks dost thanks once again for giving whts up number. Friend on mat table I need to add select options and after click edit button I want to get select selected value of that particular row. Please help.

Reply
Ajay Malhotra July 10, 2020 - 4:07 am

Thank you. Yes I will share link for that.

Reply
Waqas July 10, 2020 - 9:24 pm

Thanks friend waiting for link please help

Reply
Waqas July 12, 2020 - 3:08 pm

Friend how are u please help

Reply
Ajay Malhotra April 23, 2021 - 5:27 am

I am good and email me at therichposts@gmail.com.
Thanks

Reply

Leave a Comment

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