Mastering Mobile Application Development with Ionic/

...

/

Angular Template Directives: ngSwitch, ngIf, ngStyle

Angular Template Directives: ngSwitch, ngIf, ngStyle

Learn about Angular's built-in ngSwitch, ngIf, and ngStyle directives and how to use them in Ionic applications.

We'll cover the following...

ngSwitch

This directive is used where we want to display one possible option from a range of options based on a condition being met.

For example:

Press + to interact
<span [ngSwitch]="technology">
  <span *ngSwitchCase="Apache Cordova">Apache Cordova</span>
  <span *ngSwitchCase="TypeScript">TypeScript</span>
  <span *ngSwitchCase="Angular">Angular</span>
  <span *ngSwitchCase="Ionic">Ionic</span>
  <span *ngSwitchDefault>Other</span>
</span>

In the above example, we have three built-in directives at work:

  • ngSwitch
  • ngSwitchCase
  • ngSwitchDefault

If the <span> match value is equal to that of the switch value, then only that <span> ...