Angular

Appearance

Utiliser la directive *ngSwitch ​

Préalablement: Ajoutons CommonModule ​

Pour utiliser le cette directive, vous devez d'abord inclure CommonModule dans votre application en l'ajoutant à la liste des imports dans votre fichier de module principal

ts
import { CommonModule } from '@angular/core';

@NgModule({
  declarations: [
    // Ici, le composant qui contient la directive
  ],
  imports: [
    // ... autre modules
    CommonModule
  ],
})
export class MonModule { }
import { CommonModule } from '@angular/core';

@NgModule({
  declarations: [
    // Ici, le composant qui contient la directive
  ],
  imports: [
    // ... autre modules
    CommonModule
  ],
})
export class MonModule { }

Si vous mettez pas le module, vous aurez l'erreur suivante: Can't bind to '<nom de la directive>' since it isn't a known property of 'div'

Proche de la directive ngIf, la directive ngSwitch permet d'afficher un élément selon la valeur d'une variable. Prenons un exemple classique : la création d'onglets :

js
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <ul class="nav nav-tabs">
      <li [ngClass]="{active: tab==1}" (click)="tab=1"><a href="#">Home</a></li>
      <li [ngClass]="{active: tab==2}" (click)="tab=2"><a href="#">Profile</a></li>
      <li [ngClass]="{active: tab==3}" (click)="tab=3"><a href="#">Messages</a></li>
    </ul>
    <div [ngSwitch]="tab">
      <div *ngSwitchCase="1">Content 1</div>
      <div *ngSwitchCase="2">Content 2</div>
      <div *ngSwitchCase="3">Content 3</div>
      <div *ngSwitchDefault>Default</div>
    </div>
  `
})
export class AppComponent {
  tab: number = 1;
}
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <ul class="nav nav-tabs">
      <li [ngClass]="{active: tab==1}" (click)="tab=1"><a href="#">Home</a></li>
      <li [ngClass]="{active: tab==2}" (click)="tab=2"><a href="#">Profile</a></li>
      <li [ngClass]="{active: tab==3}" (click)="tab=3"><a href="#">Messages</a></li>
    </ul>
    <div [ngSwitch]="tab">
      <div *ngSwitchCase="1">Content 1</div>
      <div *ngSwitchCase="2">Content 2</div>
      <div *ngSwitchCase="3">Content 3</div>
      <div *ngSwitchDefault>Default</div>
    </div>
  `
})
export class AppComponent {
  tab: number = 1;
}

Nous utilisons BootStrap pour un visuel plus jolie. Le principe est simple :

  • ngSwitch prend la valeur de la valeur tab
  • tab change selon l'onglet cliqué
  • ngSwitchCase fait une comparaison avec sa valeur et la valeur de ngSwitch. Si l'égalité est positive alors l'élément s'affiche.
  • ngSwitchDefault affiche l'élément si aucun des ngSwitchCase n'est positif.

Nous initialisons tab à 1 pour être sur le premier onglet lors de l'affichage du composant.