CODEWITHSUNDEEP
angular
Sathish Shajahan
Sathish Shajahan

Reputation: 41

How to render conditionally in Angular?

I just want to simply render the button conditionally rather than rendering {{allcode}} inside curly braces. I come from the react world, it's really feeling weird. How to achieve this?

Angular code - but it's still not working:

<td *ngFor="let column of requestColumns">
   {{ 
   row[column.value] === "Allow" ?
   <button>Allow</button> :
   row[column.value] === "Reject" ?            
   <button>Reject</button> :
   row[column.value]
   }}
</td> interpo

Upvotes: 1

Views: 6069

Answers (2)

Manish
Manish

Reputation: 6286

If you are just trying to render what is in the column.value and have somewhat common logic:

<td *ngFor="let column of requestColumns">
 <button (click)="allowOrReject(column)">{{column.value}}</button>
</td>

If you have separate logic/methods for the buttons:

<td *ngFor="let column of requestColumns">
 <button *ngIf="column.value === 'Allow'" (click)="allow(column)">Allow</button>
 <button *ngIf="column.value === 'Reject'" (click)="reject(column)">Reject</button>
</td>

Upvotes: 2

sunilbaba
sunilbaba

Reputation: 445

Use like below

<td *ngFor="let column of requestColumns">
   <button *ngIf="column.value === "Allow"">Allow</button> :
   <button *ngIf="column.value === "Reject""> Reject</button>
 </td>

Upvotes: 1

Related Questions