Display Edit & Delete buttons in Angular Material table

Question

Hi

I have below columns data returned. I want if name = actions' then in row 2 button Edit & Delete should be displayed in Angular 17

Columns are displayed like below
1: 
name: "description"
title: "Description"

Thanks

Dharmeshwaran S · Answer

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