Display Edit & Delete buttons in Angular Material table

To display buttons based on a specific condition, you can use Angular's templating features along with conditional logic in your component template. Here’s a step-by-step guide on how to achieve this:

• Define the data structure in your component.
• Use *ngIf to conditionally display the buttons in your template.

Step 1: Define the Data Structure

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

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent {
  columns = [
    { name: "description", title: "Description" },
    { name: "actions", title: "Actions" }
  ];

  rows = [
    { description: "Item 1", actions: true },
    { description: "Item 2", actions: true }
  ];
}

Step 2: Create the Template

In your component's HTML file, use *ngIf to conditionally display the buttons.

    
    


  
  
 Description 
    
 {{ row.description }} 
  

  
  
 Actions 
    

      
        Edit
        Delete
      
    
  

  

  

Step 3: Define the Logic for Edit and Delete Buttons

In your component's TypeScript file, define the methods for onEdit and onDelete.

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

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent {
  columns = [
    { name: "description", title: "Description" },
    { name: "actions", title: "Actions" }
  ];

  rows = [
    { description: "Item 1", actions: true },
    { description: "Item 2", actions: true }
  ];

  displayedColumns: string[] = ['description', 'actions'];

  onEdit(row: any) {
    // Handle edit logic here
    console.log('Edit', row);
  }

  onDelete(row: any) {
    // Handle delete logic here
    console.log('Delete', row);
  }
}