if else inside of the ngFor loop in Angular 8+

Question

I wonder if there's an option for putting if else statement inside of the for loop.

I have example here if there's an any chance of converting this PHP code to angular.

PHP EXAMPLE

while($row = mysqli_fetch_array($query)) {
   $section = $row['name'];

   if($section_id == "TEST_ID") {
      $section = "APPROVED";
   }
   else {
      $section = "DECLINED";
   }

   echo $section;

}

ANGULAR CODE

NOTE: This is a example code only for the reference.

<tr *ngFor="let student of students">
    <td>{{ student.student_id | uppercase }}</td>
    <td>{{ student.name }}</td>
    <td>{{ student.section }}</td>
    <td><button class="btn btn-sm btn-primary btn-block" (click)="edit(student)">EDIT</button></td>
    <td><button class="btn btn-sm btn-danger btn-block" (click)="delete(student)">DELETE</button</td>
</tr>

I do research about this problem but I'm so confused since I'm a beginner in this framework. Please help me out of this problem, thank you.

The `*ngIf` directive is needed in Angular for this: https://angular.io/api/common/NgIf — Milan Tenk, May 07 '20 at 06:58
Yes Sir Sameer, but I wonder why how can I put it in the code. Please help :(( — pacificskybeachresort, May 07 '20 at 06:59
Does this answer your question? [How to apply filters to \*ngFor?](https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor) — George Karanikas, May 07 '20 at 06:59
Does this answer your question? [How to use \*ngIf else?](https://stackoverflow.com/questions/43006550/how-to-use-ngif-else) — mr. pc_coder, May 07 '20 at 07:00
@pacificskybeachresort, Can you check this stackblitz link https://stackblitz.com/edit/bootstrap-qts57i which handles else block.. — Maniraj Murugan, May 07 '20 at 07:20

score 0 · Accepted Answer · answered May 07 '20 at 07:01

0

Yes you can do with directives

<tr *ngFor="let student of students">
    <td>{{ student.student_id | uppercase }}</td>
    <td>{{ student.name }}</td>
    <td *ngIf="student.sectionId == TestID">APPROVED</td>
    <td *ngIf="student.sectionId != TestID">DECLINED</td>
    <td><button class="btn btn-sm btn-primary btn-block" (click)="edit(student)">EDIT</button></td>
    <td><button class="btn btn-sm btn-danger btn-block" (click)="delete(student)">DELETE</button</td>
</tr>

answered May 07 '20 at 07:01

Sajeetharan

216,225
63
350
396

Thank you so much Sir, but I wonder why how can I put the else statement since this example is for if statement only. Thank you – pacificskybeachresort May 07 '20 at 07:07
I don't consider this as acceptable answer because the ngIf statement is tested twice in every iteration and this can be costly in some situation – Adel Ben Hamadi Oct 16 '22 at 09:52
the acceptbale answer might be this https://stackoverflow.com/questions/48515267/angular-ng-template-with-parameter-inside-ngif-inside-ngfor – Adel Ben Hamadi Oct 16 '22 at 10:11

Adel Ben Hamadi · Answer 2 · 2022-10-16T10:34:19.643

use NgTemplateOutlet and ngTemplateOutletContext

<tr *ngFor="let student of students">
<td>{{ student.student_id | uppercase }}</td>
<td>{{ student.name }}</td>
<ng-container [ngTemplateOutlet]="student.sectionId == TestID  ? approved: 
             declined" [ngTemplateOutletContext]="{student:student}">
</ng-container>
<td><button class="btn btn-sm btn-primary btn-block" (click)="edit(student)">EDIT</button></td>
<td><button class="btn btn-sm btn-danger btn-block" (click)="delete(student)">DELETE</button</td>
        </tr>
<ng-template #approved let-s="student">
<td>APPROVED</td>
</ng-template>
<ng-template #declined let-s="student">
<td>DECLINED</td>
</ng-template>

if else inside of the ngFor loop in Angular 8+

2 Answers2