angular: directivas estructurales [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= angular: directivas estructurales
  * PPT 3.7 + 3.8 + 3.9 + 4.1 + 4.2 + 4.3
  * lógica en capa de presentación (plantilla)
  * se reconocen por tener **%%*%%** en el nombre
  * no es necesario fichero HTML
  * no es un componente

== ngIf
  * elemento que queremos ocultar o mostrar
  * se le asigna algun expresión que retorne un boolean
  * angular crea o descrea el elemento del DOM según marque la variable: <sxh javascript; title:ejemplo uso *ngIf><div *ngIf="mostrar" class="card text-white bg-primary mb-3" style="max-width: 100%;"></sxh>
    * **mostrar** al estar vinculado a la directiva hace referencia a un atributo de la clase, si no, iría entre %%{{ }}%%
    * binding de eventos:<sxh html; binding evento click><button (click)="mostrar = !mostrar" class="btn btn-outline-primary btn-block"></sxh>

== ngFor
  * repite el elemento:<sxh html; title: ejemplo *ngFor><li *ngFor="let color of colores" class="list-group-item">{{color}}</li></sxh>
    * usamos un array **colores** defindo en la clas del componente:<sxh typescript>export class BodyComponent {
    mostrar = false;
    colores: string[] = ['rojo','verde','azul'];
    ...
}</sxh>
  * se pueden adicionar cosas:<sxh html; title: ejemplo *ngFor adicionado><li *ngFor="let color of colores; let i=index" class="list-group-item">{{i}} {{color}}</li></sxh>

== ngIf-else + ngTemplate
<sxh html; title: ejemplo ngIf-else + ngTemplate 1><div *ngIf="numero % 2 == 0; else impar">
    <h1>Número {{ numero }} - Es par</h1>
</div>
<ng-template #impar>
    <h1>Número {{ numero }} - Es impar</h1>
</ng-template></sxh>

<sxh html; title: ejemplo ngIf-else + ngTemplate 2>
<div *ngIf="numero % 2 == 0; then par else impar"></div>

<ng-template #par>
    <h1>Número {{ numero }} - Es par</h1>
</ng-template>

<ng-template #impar>
    <h1>Número {{ numero }} - Es impar</h1>
</ng-template>
</sxh>

== procesos asíncronos (4.4)

== ngSwitch
<code bash>ng g[enerate] c[component] components/ngSwitch -is --skipTests</code>
<sxh typescript; title: ng-switch.component.ts>
...
export class NgSwitchComponent implements OnInit {
    mensaje = 'info';
}
...
</sxh>
<sxh html; title: ng-switch.component.html>
<div [ngSwitch]="mensaje">
    <div *ngSwitchCase="'success'">Success</div>
    <div *ngSwitchCase="'info'">Info</div>
    <div *ngSwitchCase="'warning'">Warning</div>
    <div *ngSwitchDefault>Danger</div>
</div>
</sxh>
<sxh html; title: ng-switch.component.html v2>
<button type="button" (click)="mensaje='success'" class="btn btn-primary">Cambiar</button>
<div [ngSwitch]="mensaje">
    <div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
        <strong>Well done!</strong> You successfully read this important alert message!
    </div>
    <div *ngSwitchCase="'info'" class="alert alert-info" role="alert">
        <strong>Heads up!</strong> This alert needs your attention...
    </div>
    <div *ngSwitchCase="'warning'" class="alert alert-warning" role="alert">
        <strong>Warning!</strong> Better check yourself, you're not looking too...
    </div>
    <div *ngSwitchDefault class="alert alert-danger" role="alert">
        <strong>Oh snap!</strong> change a few things up and try submitting again!
    </div>
</div>
</sxh>