Directivas

Las directivas en Angular son realmente útiles, permiten la definición de pedazos de código reutilizables dentro de un proyecto, como por ejemplo código con plantillas HTML que definan botones o vistas completas, como otro tipo de elementos más completos que incluyan funciones o variables dinámicas que permitan trabajar directamente con el DOM.

Existen tres tipos de directivas:

1. Componentes: Directivas con una plantilla asociada.

2. Directivas estructurales: Directivas que modifican el DOM, añadiendo o eliminando elementos que modifican la estructura del DOM.

3. Directivas para atributos: Modifican la apariencia o comportamiento de un elemento.

Vamos a ver cada uno de estos tipos de directivas por separado:

Componentes

Los componentes (llamados "páginas" en Ionic) se consideran un tipo especial de directiva ya que tienen una vista asociada. Estas directivas ya las tratamos en una sección independiente.

Directivas estructurales

Las directivas estructurales nos permitirán modificar la estructura de una página añadiendo o quitando elementos. Las dos directivas de este tipo más utilizadas son *ngFor y *ngIf, para crear un bucle y una condición, respectivamente.

*ngIf

La directiva *ngIf evalua la variable asignada, y en caso de no estar definida o contener un valor falso, eliminaría el elemento sobre el que se aplique del DOM. Por ejemplo:

<div *ngIf=isShown>
    <h1>Welcome!</h1>
</div>

En este caso, si la variable "isShown" (de la clase asociada) no está definida o contiene un valor falso, se eliminarían del DOM tanto la etiqueta <div> sobre la que se aplica como la etiqueta <h1> que contiene.

*ngFor

La directiva *ngFor se aplica directamente sobre el elemento que se desea repetir, por ejemlo:

<ul>
    <li *ngFor="let item of listItems">
        {{ item }}
    </li>
</ul>

En el ejemplo anterior se crea un bucle que añadirá tantas etiquetas <li> como elementos tenga el array "listItems". La variable "item" contendrá el valor del elemento correspondiente del array en dicha iteración.

Si queremos obtener el índice de la iteración podemos utilizar la variable "index" de la forma:

<ul>
    <li *ngFor="let item of listItems; let i = index">
        {{ i + 1 }} {{ item }}
    </li>
</ul>

Ejemplos

También podemos combinarlas como queramos, por ejemplo, en el siguiente código en primer lugar se evalúa si está definida la variable "listItems", en caso de estarlo se creará el componente y se procesará el bucle definido por *ngFor. De esta forma, en caso de no estar definida la variable no daría error al intentar iterar por una variable que no existe.

<ul *ngIf="listItems">
    <li *ngFor="let item of listItems">
        {{ item }}
    </li>
</ul>

O un ejemplo más avanzado del uso de la directiva *ngIf. Vamos a hacer que al pulsar un botón se oculte o muestre un determinado elemento. Para esto, en la plantilla, añadimos un botón que al pulsarlo llame a un función (toggleWelcome) que cambie el estado de una variable, y además usamos esa variable (isShown) para determinar con *ngIf si el elemento se tiene que mostrar o no:

<button (click)="toggleWelcome()">Toggle Welcome</button>
<div *ngIf=isShown>
    <h1>Welcome!</h1>
</div>

Y en el componente asociado tendríamos que añadir la variable "isShown" (de tipo booleano e inicializada por defecto a false) y la función "toggleWelcome" para que cambie el estado de la variable:

export class HomePage {
    isShown: boolean = false;

    constructor() {}
    toggleWelcome() {
        this.isShown = !this.isShow;
    }
}

Directivas para atributos

Las directivas para atributos permiten modificar la apariencia o comportamiento de un elemento. Es decir, a diferencia de las directivas estructurales,e stas no modifican el DOM para quitar o añadir elementos, sino que actúan sobre un elemento ya existente. A continuación se incluye un ejemplo en el que se han utilizado tres directivas, una para añadir un padding a la sección principal de contenido, y dos sobre el botón, para que adopte la apariencia definida por Ionic (dependiente de cada plataforma) y que se dibuje con los bordes redondeados:

<ion-content padding>
    <button ion-button round>Púlsame</button>
</ion-content>