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 { }
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;
}
Nous utilisons BootStrap pour un visuel plus jolie. Le principe est simple :
ngSwitch
prend la valeur de la valeurtab
tab
change selon l'onglet cliquéngSwitchCase
fait une comparaison avec sa valeur et la valeur dengSwitch
. Si l'égalité est positive alors l'élément s'affiche.ngSwitchDefault
affiche l'élément si aucun desngSwitchCase
n'est positif.
Nous initialisons tab
à 1
pour être sur le premier onglet lors de l'affichage du composant.