Styjun

In each row within the mat-table displayed column, an initial View button is displayed. When clicking on one View button and the Close button is displayed in ALL rows after clicking one View button.

Initial state of mat-table

Close button in each row

<mat-table [dataSource]="purchaseSource">
 <ng-container matColumnDef="projectName">
 <mat-header-cell *matHeaderCellDef>Project Name</mat-header-cell>
 <mat-cell *matCellDef="let purchase"> purchase.projectName </mat-cell>
 </ng-container>
 <ng-container matColumnDef="supplier">
 <mat-header-cell *matHeaderCellDef>Supplier</mat-header-cell>
 <mat-cell *matCellDef="let purchase"> purchase.supplier_name </mat-cell>
 </ng-container>
 <ng-container matColumnDef="profName">
 <mat-header-cell *matHeaderCellDef>Purchase Author</mat-header-cell>
 <mat-cell *matCellDef="let purchase"> purchase.author_name </mat-cell>
 </ng-container>
 <ng-container matColumnDef="submittedDate">
 <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
 <mat-cell *matCellDef="let purchase"> purchase.submittion_date </mat-cell>
 </ng-container>
 <ng-container matColumnDef="status">
 <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
 <mat-cell *matCellDef="let purchase"> purchase.status </mat-cell>
 </ng-container>
 <ng-container matColumnDef="total">
 <mat-header-cell *matHeaderCellDef>Total</mat-header-cell>
 <mat-cell *matCellDef="let purchase"> purchase.total </mat-cell>
 </ng-container>
 <ng-container matColumnDef="details">
 <mat-header-cell *matHeaderCellDef> Details </mat-header-cell>
 <mat-cell *matCellDef="let purchase">
 <button mat-button color="primary" *ngIf=!display.details 
 (click)="displaySelectedDetails(purchase)">View</button>
 <button mat-button color="warn" *ngIf=display.details 
 (click)="displayPurchaseTable()">Close</button>
 </mat-cell>
 </ng-container>
 <mat-header-row *matHeaderRowDef="colToDis"></mat-header-row>
 <mat-row *matRowDef="let row; columns: colToDis"></mat-row>
</mat-table>

The html lines of code above, containing the button on each row are:

<button mat-button color="primary" *ngIf=!display.details 
 (click)="displaySelectedDetails(purchase)">View</button>
<button mat-button color="warn" *ngIf=display.details 
 (click)="displayPurchaseTable()">Close</button>

The following is the typescript methods that the buttons execute. (for your information)

/** Displays the Purchase Table by reseting all display boolean objects. Causing the View button to be displayed */
displayPurchaseTable() 
 this.resetDisplays();
 this.selectedPurchase = null;


/** Displays the details of the given purchase. */
displaySelectedDetails(purchase: Purchase) 
 this.toDisplay('details');
 this.selectedPurchase = purchase;


/**
 * Displays either the purchase-create or purchase-details
 * or purchase-sheets component.
 */
toDisplay(toDisplay: string) 
 this.selectedPurchase = null;
 this.resetDisplays();
 switch (toDisplay) 
 case 'createPurchase': this.display.createPurchase = true; break;
 case 'details': this.display.details = true; break;
 default: this.display.sheets = true; break;
 

Is it possible to display the Close button only in the row in which the user clicked the View button?