Crear directiva en Angular

Vamos a ver cómo crear una directiva en Angular

Vamos a la terminal de Atom y escribimos el siguiente comando:

ng generate component directiva

Tambien podemos los comandos abreviados:

ng g c directiva

Evidentemente, a nuestra directiva la hemos llamado directiva.

Veamos lo que nos ha creado:

Bien, ya nos ha creado todos los archivos que necesitamos, incluso los que no necesitamos, de momento.

directiva.component.ts

Dentro del archivo directiva.component.ts vamos a crear un atributo public que va a consistir en un array que vamos a recorrer en nuestra página index. En la siguiente imagen se ve claramente:

directiva.component.html

En el archivo directiva.component.html añadimos nuestro código html, en este caso hemos creado una lista a la que le vamos a pasar los valores del array creado anteriormente. Recorremos el array con ngFor. Vamos a verlo:

Ya sólo nos queda llamar a la directiva desde donde queramos. En mi caso desde la única página que tiene mi proyecto de prueba. Llamamos a la directiva mediamte la anotación que tiene su nombre, es decir, su selector, evidentemente:

Directiva ngIf

Con esta directiva vamos a evaluar una expresión. Verdadero o falso, mostrar u ocultar contenido.

Creamos una variable tipo boolean que por defecto la vamos a dejar en true.

Creamos un botón que va a mostrar u ocultar la información de nuestro array. Para ello vamos a invocar a la acción click.

Si queremos que simplemente oculte el contenido, le decimos que la variable habilitar va a ser false.

Pero seguro que vamos a darle mucha más utilidad a nuestro botón si cumple con las funcionalidades de ocultar y mostrar. Vamos a verlo:

Ahora sólo nos falta que el texto del botón («Ocultar») sea dinámico, según si queremos que muestre u ouclte el contenido. Para ello es muy sencillo, evaluamos lo que tiene que mostrar en función del estado de la variable habilitar.