Usare la direttiva ngIf con else in Angular

Mattepuffo's logo
Usare la direttiva ngIf con else in Angular

Usare la direttiva ngIf con else in Angular

La direttiva ngIf di Angular ci permette di modificare il template HTML in base ad una o più condizioni.

A me però serviva utilizzare anche un else!

In pratica se un campo ha valore U mostrare una cosa, sennò mostrarne un'altra.

Ecco qui un esempio pratico, all'interno di una tabella:

<p-table #dt [value]="movimenti">

    <ng-template pTemplate="header">
        <tr>
            <th pSortableColumn="mov_tipo">
                Tipo
                <p-sortIcon field="mov_tipo"></p-sortIcon>
                <p-columnFilter type="text" field="mov_tipo" display="menu" class="p-ml-auto">
                </p-columnFilter>
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-item>
        <tr class="p-selectable-row">

            <td [ngClass]="{'txt_red': item.mov_tipo === 'U', 'txt_green': item.mov_tipo === 'E'}">
                <span *ngIf="item.mov_tipo === 'U'; else elseBlock">Uscite</span>
                <ng-template #elseBlock>Entrate</ng-template>
            </td>

        </tr>
    </ng-template>

</p-table>

In pratica dopo l'else dovete indicare il blocca da visualizzare.

Quest'ultimo verrà mostrato di default nel caso si verifichi la condizione ngIf.

Enjoy!


Condividi su Facebook

Commentami!