Answer the question
In order to leave comments, you need to log in
How can delete buttons be added to each row of a table?
Sorry, I just started learning Angular. I decided to display an array of programmers in a table using Angular Material. How can I add a button to remove the programmer from the table to each row of the table using Angular Material?
My table.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {Programmer} from "../../interfaces/Programmer";
const ELEMENT_DATA: Array<Programmer> = [
{ id: 1, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true},
{ id: 12, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true},
{ id: 13, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true},
{ id: 11, firstName: 'Павел', lastName: 'Петров', middleName: '', position: Position.JUNIOR, dateOfBirth: '11/01/2001', active: true}
];
@Component({
selector: 'app-programmer-table',
templateUrl: './programmer-table.component.html',
styleUrls: ['./programmer-table.component.scss']
})
export class ProgrammerTableComponent {
displayedColumns: Array<String> = ['id', 'firstName', 'lastName', 'middleName', 'position', 'dateOfBirth', 'active'];
@Input() programmers!: Array<Programmer>;
}
<table mat-table [dataSource]="programmers" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef> firstName </th>
<td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastName">
<th mat-header-cell *matHeaderCellDef> lastName </th>
<td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
</ng-container>
<ng-container matColumnDef="middleName">
<th mat-header-cell *matHeaderCellDef> middleName </th>
<td mat-cell *matCellDef="let element"> {{element.middleName}} </td>
</ng-container>
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> position </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<ng-container matColumnDef="dateOfBirth">
<th mat-header-cell *matHeaderCellDef> dateOfBirth </th>
<td mat-cell *matCellDef="let element"> {{element.dateOfBirth}} </td>
</ng-container>
<ng-container matColumnDef="active">
<th mat-header-cell *matHeaderCellDef> active </th>
<td mat-cell *matCellDef="let element"> {{element.active}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="display(row)"></tr>
</table>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question