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 *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}} - {{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}} - {{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.
Leave a reply

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?