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'}
];
}
