Search⌘ K
Home
Courses
Mastering Mobile Application Development with Ionic

Angular Template Directives: ngSwitch, ngIf, ngStyle

Explore the use of Angular template directives ngSwitch, ngIf, and ngStyle to create dynamic user interfaces in Ionic apps. Understand conditional rendering, styling, and how these directives control component display based on state or conditions.

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:

HTML
<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> ...