New control flow for forLoop and empty in Angular 17

 

import {CommonModule} from '@angular/common';

import {Component} from '@angular/core';

@Component({

selector: 'app-root',

imports: [CommonModule],

template: `

Welcome to Angular-17!

<!-- new control flow for forLoop -->

<!-- new control flow to handle if, else if and else -->

@if(userInfo.isLoggedIn) {

<div>Logged-in</div>

} @else if(userInfo.isAdmin) {

<div>Admin</div>

} @else {

<div>Please Login</div>

}

@for (course of courses; track course) {

<div>{{course | json}}</div>

==================================

} @empty {

<div>No Courses found...</div>

}

`,

standalone: true,

})

export class AppComponent {

isLoading = false;

userInfo = {

isLoggedIn:true,

isAdmin:false

}

courses = [

{ id: 'r18', name: 'React + Redux'},

{ id: 'A17', name: 'Angular + NGRX'}

];

}