jose-m
11/4/2017 - 4:51 AM

ANGULAR NGIF & NGSWITCH

NOTAS/APUNTES ANGULAR NGIF & NGSWITCH

ANGULAR NGIF & NGSWITCH:

PARA CREAR UN IF STATEMENT SIMPLEMENTE SE CREA LA DIRECTIVA *NGIF

name: String = 'John Doe';
showName: boolean = true;

<h1>hello <span *ngIf="showName">{{name}} </span> </h1>

PARA PONER UN ELSE:

<h1>hello <span *ngIf="showName">{{name}} </span> </h1>
<h1>hello <span *ngIf="!showName">ES FALSE </span> </h1>

OTRA FORMA DE HACERLO ES MEDIANTE NG-TEMPLATE:

<h1>hello <span *ngIf="showName; else noName">{{name}} </span> </h1>
<ng-template #noName>World</ng-template>

OTRA FORMA DE HACERLO ES MEDIANTE UN OPERADOR TERNARIO:

<p>Hello {{ showName ? name : 'Nada' }}</p>

OTRA FORMA DE HACER UN IF
*ngIf = "items?.length > 0; else noItems"


NGSWITCH:
SE DEFINE LA OPCION
greeting: number = 1;

SE CREA EL TAG HTML

<div [ngSwitch]="greting"> 
  <div *ngSwitchCase="'1'">Hello World</div>
  <div *ngSwitchCase="'2'">Hello World</div>
  <div *ngSwitchDefault>Hello World</div>
</div>