How to use *ngSwitch in Angular 2+ Versions

Switch case is very popular among many languages weather on client side or server side. A switch provides flexibility to validate a section according to expressions. In this post, we will discuss the implementation of Switch cases in Angular 7 latest version.

*ngSwitch in Angular 2+ Versions

*ngSwitch workes on expressions, we can have multiple sections wrapped in various switch cases which can be shown according to truth expression.

NgSwitch takes a value which shows the view having a matching expression in switch cases.


Here [ngSwitch] takes a value, which then matched in expression defined in *ngSwitchCase. If none of the expression matches then ngSwitchDefault view will be shown.

So let’s fill up above HTML with test expressions


Give switch_expression in component a value to show matching element.

Now only “match_expression_2” will be visible as a matching case.

So here we discussed a quick example of ngSwitch in Angular 2+ versions.

Leave a Reply

Notify of