Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

How to use *ngFor, *ngIf and *ngSwitch directive in Angular 9 | 8 | 7 | 6 | 5 | 4

We use angular directive for performing some operations on data like displaying multiple data with conditions etc. You can display data by binding controls in an HTML template to properties of an Angular component.
Angular   Angular 7   Angular 8   Angular 9   Javascript  

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 7 *ngSwitch directive in Angular Framework. Thank you for watching this article.

0replies
Leave a reply
46
Registerd Users
88
Total Subscribers
59
Total Articles
42108
Total Views