ngIf example in angular

Open Command prompt and use below commands to create angular project

E:

cd E:\TestProjects\Angular

ng new ngIf-example-in-angular --style=scss --routing --skip-install

cd ngIf-example-in-angular

npm install

Open project in visual studio code.

Open app.component.ts file and update code as below

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent {

  isValid = true;

  numbers = [1,2,3,4,5,6,7,8,9,10]; 

}

Open app.component.ts file and update code as below

<h1>ngIf example in angular</h1>

<p *ngIf="isValid">

  Data is valid.

</p>

<p *ngIf="!isValid">

  Data is not valid.

</p>

<div *ngFor="let id of numbers">

  <div *ngIf="id%2 == 0">

  <div>{{id}}-Even Number</div>

  </div>  

  <div *ngIf="id%2 == 1">

  <div>{{id}}-Odd Number</div>

  </div>  

</div>

Output: