Directivas estructurales – ngIf ngFor ngSwitch

Posted by in Angular, Inicio Angular

Una de las características de angular es la de crear aplicaciones spa con contenido segmentado y dinámico. La primera característica se consigue gracias a la creación de los componentes vistos en la entrada anterior y la segunda gracias a elementos como las directivas estructurales, las cuales permiten modificar el DOM de la página mediante las directivas estructurales. Por lo tanto se puede definir a las directivas estructurales como atributos que se aplican a elementos de HTML las cuales posibilitan la creación, eliminación y/o modificación de elementos del DOM que estén dentro de la etiqueta donde han sido aplicados. En esta entrada se verán las directivas ngIf y nfFor. Ambas directivas son fácilmente reconocibles ya que siempre van precedidas del carácter *

ngIf

Esta directa muestra u oculta el contenido de una etiqueta HTML cuando el resultado de la expresión a la que está igualada da como resultado verdadero o falso respectivamente. La igualdad puede ser o bien a un código JS o a una función del archivo typeScript lineado a la template.

En este caso el div cuya clase es container tiene aplicada una directiva *ngIf igualada a una variable llamada mostrandoIf que está definida en el archivo .ts. Del mismo modo el botón tiene aplicado un evento click el cual ejecuta el método mostrarElementoNgIf() definido en el archivo .ts el cual modifica de verdadero a falso el contenido de la variable, haciendo visible o invisible el contenido del div

Del mismo modo, se puede aplicar un código js para modificar la variable sin necesidad de llamar a una función del código

En este caso el botón en vez de llamar a una función , cambia el valor de la variable directamente mediante una negación de la misma

ngFor

Se trata de una directiva estructural que permite realizar repeticiones sobre un código HTML tomando como valores de la iteración los pertenecientes a una colección de datos. aquel lugar donde se aplique la directiva, será tantas veces repetido como elementos tenga la colección indicada. La estructura de la directiva es:

Se repetirá el div tantas veces como elementos tenga la colección. Por cada iteración el valor de indice tomará el valor del elemento actual de la iteración. Para poder mostrar su contenido dentro del div se engloba entre {}.

En este caso se creará una lista donde cada uno de los elementos de la lista será cada uno de los elementos de la colección lenguajes definida en el archivo ts asociado.

ngSwitch

El funcionamiento de esta directiva es exactamente igual que el de un switch de programación, donde el resultante de una expresión definirá cual es el elemento del DOM (el tag) que se mostrará. Para ello se utilizan los atributos [ngSwitch] igualado a una variable definida en código (la cual será la que cambie su valor) y los atributos *ngSwitchCase igualados a los posibles valores que puede tomar la variable. Cuando la variable tome el valor de uno de los *ngSwitchCase se mostrará el tag asignado. También se puede incluir un tag con el atributo *ngDefaultSwitch para que se muestre siempre y cuando el valor de la variable no está contemplado en ninguno de los casos

En este caso el div de la línea 1 tiene el atributo ngSwitch asignado a una variable llamada mostrarSw, la cual está declarada en la clase directiva.component.ts como un number

Con la pulsación de cada uno de los botones, en el evento (click), se programa el cambio del valor de la variable. En las etiquetas contenidas en el div de la linea 26 se puede observar como se les asigna un valor con ngSwitchCase de 1, 2 y 3, por lo que cuando la variable tome alguno de esos valores, se mostrará el div al que esté asignado el valor actual de la variable

 

El código completo tanto html como ts es el siguiente: