markdown Diretivas（Switch - ngSwitch，ngSwitchCase，* ngSwitchDefault）

Posted 2021-05-06

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

Funciona como o switch da programação convencional.

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

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