Angular ngIf & ngSwitch Built-In Directives

In this article, we going to see Angular ngIf & ngSwitch built-in directives. Angular built-in directives provide the most beneficial behavior to the DOM elements. So here you going to see the benefits of ngIf and ngSwitch directives.

Angular ngIf Built-In Directive

Here Angular ngIf directive used to display or remove an element from the DOM. Based on our condition it will display or remove an element, for example, ngIf the condition is true it will display an element or else it will be removed from our DOM.

Here below you have an example and we going to use the same code as we used for ngFor but it lightly modified with the users and their age. Based on age here we going to filter the user’s details with the ngIf condition.

app.component.html

app.component.ts

In the above code, you can see we used ngFor to loop the users list after that, we used ngIf for the condition <=27 if it true this will filter the same & below the age users others will be automatically removed from the DOM.

Output:

Angular ngSwitch Built-In Directive

Angular ngSwitch built-in directive allows you to hide or show the HTML element which you given, based on the expression which matches with given ngSwith expression. The ngSwitch directive works as the as same you have seen in the JavaScript Switch statement.

ngSwitch directive works with the combination of ngSwitchCase and ngSwitchDefault directives to get the result from the various possibilities. By using ngSwitchCase statement which does not match with expression then it goes to another ngSwitchCase statement if still, it does not match with the expression finally the result will show the default element with the ngSwitchDefault.

Example for Angular ngSwitch Directive

Below you have the example for the locations, by using ngSwitch we going to match the expression with the help of ngSwitchCase or else it will display ngSwitchDefault expression location.

app.component.html

app.component.ts

Here now result would be Norway, but the locations don’t meet the location, it will display ngSwitchDefault express Iceland.

Example for Angular ngFor & ngSwitch Directives

In this example, we going to list out achiever’s names and their countries. Using ngFor we going to list out all the person and country with ngSwitch and if the ngSwitch matches with ngSwitchCase country it will display the name of person and country. If nothing matches with the ngSwithcCase it displays ngSwitchDefault expression. In the below code you have the example.

app.component.html

app.component.ts

Output:

Conclusion:

I hope this article will help you to understand the ngIf and ngSwitch directives. If you like this article share it with your friends.

Angular 9Angular CLIngIfngSwitch