How to use *ngFor, *ngIf and *ngSwitch directive in Angular

Angular *ngFor, *ngIf and *ngSwitch Directives

 

1) *ngFor

You can display data by binding controls in an HTML template to properties of an Angular component by using *ngFor

 

example

Assume we already having fruits array as ["Mango", "Banana","Sitafal"] so we can display this array of items using *ngFor

*ngFor="let item of fruits; let i = index"

in this syntax example the asterisk mark ( * ) is used for denote the data is binding to html tags.

Following is the simple example to display the list of fruits.

// html file
<ul>
  <li *ngFor="let item of fruits; let i = index"> 
    {{i}} &nbsp; - {{item}}
  </li>
</ul>

// ts file
fruits = ["Mango", "Banana", "Sitafal"];

Output of this above code is

0 - Mango
1 - Banana
2 - Sitafal

 

2) *ngIf

The Angular *ngIf directive inserts or removes an element based on a truthy/falsy condition.

Sometimes an app needs to display a view or a portion of a view only under specific circumstances.

 

example

Assume above *ngFor example and we want only mango, so we need to use condition i.e.

// If you want to check only value then use bellow syntax

*ngIf="item == 'Mango'"

// If you want to check strict with data type and value the use bellow syntax

*ngIf="item === 'Mango'"

Following is the simple example to display the list of fruits but not mango.

// html file
<ul>
  <li *ngFor="let item of fruits; let i = index"> 
   <ng-container *ngIf="item != 'Mango'">
     {{i}} &nbsp; - {{item}}
   </ng-container>
  </li>
</ul>

// ts file
fruits = ["Mango", "Banana", "Sitafal"];

Output of this above code is

1 - Banana
2 - Sitafal

 

3) *ngSwitch

The Angular *ngSwitch directive is used for switching to multiple cases.

If the expression is match then the matched view is rendered to the html page.

 

example

If we want to show list of data with different colors with condition like country wise different color so following code is showing you how we use this.

@Component({
  selector: 'ngswitch-example',
  template: `<h4>NgSwitch</h4>
<ul *ngFor="let person of people"
    [ngSwitch]="person.country"> (1)

  <li *ngSwitchCase="'UK'" (2)
      class="text-success">{{ person.name }} ({{ person.country }})
  </li>
  <li *ngSwitchCase="'USA'"
      class="text-primary">{{ person.name }} ({{ person.country }})
  </li>
  <li *ngSwitchCase="'HK'"
      class="text-danger">{{ person.name }} ({{ person.country }})
  </li>
  <li *ngSwitchDefault (3)
      class="text-warning">{{ person.name }} ({{ person.country }})
  </li>
</ul>`
})
class NgSwitchExampleComponent {

  people: any[] = [
    {
      "name": "Douglas  Pace",
      "age": 35,
      "country": 'MARS'
    },
    {
      "name": "Mcleod  Mueller",
      "age": 32,
      "country": 'USA'
    },
    {
      "name": "Day  Meyers",
      "age": 21,
      "country": 'HK'
    },
    {
      "name": "Aguirre  Ellis",
      "age": 34,
      "country": 'UK'
    },
    {
      "name": "Cook  Tyson",
      "age": 32,
      "country": 'USA'
    }
  ];
}

Output of the above code is

 

Finally we are seen how we use *ngFor, *ngIf, *ngSwitch directive in Angular Framework. Thank you for watching this article.