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

• 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:

  <div *ngIf="mostrar" class="card text-white bg-primary mb-3" style="max-width: 100%;">

  • mostrar al estar vinculado a la directiva hace referencia a un atributo de la clase, si no, iría entre {{ }}
  • binding de eventos:

    <button (click)="mostrar = !mostrar" class="btn btn-outline-primary btn-block">

• repite el elemento:

  <li *ngFor="let color of colores" class="list-group-item">{{color}}</li>

  • usamos un array colores defindo en la clas del componente:

    export class BodyComponent {
        mostrar = false;
        colores: string[] = ['rojo','verde','azul'];
        ...
    }

• se pueden adicionar cosas:

  <li *ngFor="let color of colores; let i=index" class="list-group-item">{{i}} {{color}}</li>

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

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

• PPT 4.6