CODEWITHSUNDEEP
htmlangulartypescript
Arvind Chourasiya
Arvind Chourasiya

Reputation: 17382

How make button invisible based on other columns value of table - Angular

I have table in Angular. One column getting status and another have button. So based on status I want to show/hide Send button.

This is my code

<table>
<th>Name</th><th>Status</th><th>Send Button</th>
<tr *ngFor="let lst of records; let i = index" border="1">
  <td>{{lst.Name}} </td>  
  <td>{{lst.Status}}</td>
  <td><button (click)="onSelect(lst)" type="button">Send</button></td>
</tr>
</table>

When I am getting lst.Status as Failed I want to show button otherwise hide it. How can I do it?

Upvotes: 0

Views: 944

Answers (2)

Kirubel
Kirubel

Reputation: 1627

You can use *ngIf as follows. It only show the button if lst.Status is Failed. Otherwise, you won't be able to see the button. And also check if you didn't misspell your object property.

<td><button *ngIf="lst.Status == 'Failed'" (click)="onSelect(lst)" type="button">Send</button></td>

Upvotes: 1

jacopotaba
jacopotaba

Reputation: 94

<td><button *ngIf="lst.Status === failed" (click)="onSelect(lst)" type="button">Send</button></td>

or you can hide through css class. If the condition is true, you set opacity: 1, if the condition fail you will set opacity: 0

<td><button [ngClass]="[lst.status ? 'hide' : 'show']" (click)="onSelect(lst)" type="button">Send</button></td>

.show {
  opacity: 1;
}

.hide {
  opacity: 0;
}

Upvotes: 1

Related Questions