Además de por supuesto colocar elementos, el template de un componente puede modificarse vía directivas estructurales.

Estas directivas se aplican sobre un elemento host, y alteran el esquema de elementos de nuestra vista.

El concepto suena más complejo de lo que en realidad es en práctica, sólo queremos que quede claro para que puedas identificar estas directivas cuando observes el template de un elemento de Angular.

Las directivas estructurales aparecen dentro de la etiqueta declaración de un elemento y se distinguen porque aparecen con un * antes del nombre de la directiva, por ejemplo:

<slider *directiva=””></slider>

El asterisco es una manera sencilla de expresar lo que eventualmente Angular transformará en otra estructura distinta, por ahora no nos pondremos tan técnicos, así que no ahondaremos en qué hace Angular con el * hasta después.

Lo que aparece dentro del string de la directiva es una expresión de JavaScript que la directiva eventualmente usará, cada directiva espera instrucciones distintas, sólo es importante recordar que no es un string, lo que escribas dentro será interpretado como una expresión de JavaScript.

Algunas de las directivas más comunes que tenemos son ngIf, ngSwitch y ngFor, mismas que iremos viendo en los siguientes temas. Por ahora sólo quiero que veas un ejemplo práctico del uso de directivas estructurales.

<slider *ngIf=”mostrarSlider == true”></slider>

La clave de las directivas estructurales es que modifican el DOM, por ejemplo, ngIf define si el elemento existirá o no, dependiendo de la condición que pasamos a la directiva, ngFor crea elementos repetidos y así cada directiva altera nuestro template de distintas maneras.

Veamos cómo en los siguientes ejemplos.