LuanDantas
3/2/2018 - 11:49 AM

Diretivas (Switch - ngSwitch, ngSwitchCase, *ngSwitchDefault)

Diretivas (Switch - *ngSwitch, *ngSwitchCase, *ngSwitchDefault)

Funciona como o switch da programação convencional.

<nav>
    <a [class.active]="aba == 'home'"
    (click)="aba = 'home'">Home</a>
    <a [class.active]="aba == 'dashboard'"
    (click)="aba = 'dashboard'">Dashboard</a>
    <a [class.active]="aba == 'campanhas'"
    (click)="aba = 'campanhas'">Campanhas</a>
</nav>

Abaixo utilizamos o Switch no formato de Property Binding, pois o elemento será ficar escutando as mudanças de status conforme a página onde estivermos.

<div [ngSwitch]="aba">
    <p *ngSwitchCase="'dashboard'">Conteúdo da Dashboard</p>
    <p *ngSwitchCase="'campanhas'">Conteúdo das Campanhas</p>
    <p *ngSwitchDefault>Conteúdo da Home</p>
</div>