What Is *ngFor And *ngIf In Angular

Dipak Suthar Sep 25, 2021 0 1K

Hello Friends, In this article, we are going to learn how to use *ngFor and *ngIf directive in angular application.

1 :- *ngFor directive is a built-in structural directive. it is used to loop over the data list and arrays to show the result on the front-end. it’s implemented with HTML template this directive goes through every item in the data collections. it shows the result when we pass the *ngFor value in the double-curly braces.

2 :- *ngIf directive is used when you want to display or remove the element based on a condition. We defined the condition by passing an expression to the directive which is evaluated in the context of the host component. If the condition is true then add DOM Element else remove the DOM Element.

First I am creating *ngFor example as the following type.

Step 1 :- Now let’s create a new Angular application using the below command.

ng new ngFor-Demo --routing

Step 2 :- Add the below code in app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngFor-ngIf-demo';
  fruitsList=['Apple','Banana','Mango','Blueberry','Custard apple','Grapes']
}

Step 3 :- Add the below code in app.component.html

<h2>The Below Example Is ngFor</h2>
<div *ngFor="let frui of fruitsList">
    <td>I Like {{frui}}</td>    
</div>

Step 4 :- Let’s See Below Output.

Step 5 :- Now I am creating *ngIf example as the following type.

ng new ngIf-Demo --routing

Step 6 :- Add the below code in app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngFor-ngIf-demo';
  fruitsList=['Apple','Banana','Mango','Blueberry','Custard apple','Grapes']  
}

Step 7 :- Add below code in app.component.html

<h2>The Below Example Is ngIf</h2>
<div *ngFor="let frui of fruitsList">
  <ng-template [ngIf]="frui=='Apple'">
    <td>I Love {{frui}}</td>
  </ng-template>    
</div>

Output