Angular If statement for 3 cases

Question

How I can write a switch case or if statement in Angular that works for 3 options,

 if Boards.status==1 then "Approved"
 if Boards.status==2 then "Pending"
 if Boards.status==3 then "Rejected"

I have tried this but need to add all 3 options.

    <td>{{Boards.status==1 ? "Approved": "Pending" }}</td>

You need enclose the second condition in parenthesis: `{{Boards.status==1 ? "Approved": (Boards.status==2?"Pending":"Rejected") }}` — Eliseo, Apr 14 '20 at 08:41

score 3 · Accepted Answer · answered Apr 14 '20 at 00:53

3

You could try this out:

<tr [ngSwitch=Boards.status]="switch_expression">
  <td *ngSwitchCase="1">Approved</td>
  <td *ngSwitchCase="2">Pending</td>
  <td *ngSwitchCase="3">Rejected</td>
  <td *ngSwitchDefault>...</td>
</tr>

Feel free to refer link

answered Apr 14 '20 at 00:53

Arjun V

197
4
16

1

you can use ternary operator too – Eliseo Apr 14 '20 at 08:43

sovemp · Answer 2 · 2020-04-14T20:32:20.470

0

You can't do that with the ternary operator, but there are a couple options. One is just to replace all the stuff between the interpolation operators with a function that returns the value you want, with the function being just some if/else statements. The other way would be a bunch of divs or ng-containers that used the ngif/else pattern *ngIf else if in template.

UPDATE: @Eliseo pointed out you actually can do this with the ternary operator. From the question you could do it like so I think:

<td>{{Boards.status == 1 ? "Approved": Boards.status === 2 ? "Pending": "Rejected" }}</td>

The accepted answer also has a good way that I forgot, which is by using ngSwitchCase

edited Apr 14 '20 at 20:32

answered Apr 14 '20 at 00:49

sovemp

1,402
1
13
31

1

NOT, of couse you can use ternary operator, only take care use of parenthesis – Eliseo Apr 14 '20 at 08:41
@Eliseo wait yeah you're right, I'll update my answer. – sovemp Apr 14 '20 at 20:30

Angular If statement for 3 cases

2 Answers2