• Saltar a la navegación principal
  • Saltar al contenido principal

CARLOSZR.COM

Mi blog personal, CarlosZR

  • Blog
  • Contacto
  • Curso de SwiftUI por CarlosZR

Curso Spring Boot y Angular / 31/03/2020

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:

Crear directiva Angular
Crear directiva Angular

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:

archivo de directiva directiva.component.ts
directiva.component.ts

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:

Recorremos el array con ngFor

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:

app-directiva en archivo app.component.html
Archivo app.component.html

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.

variable boolean
Variable boolean «habilitar»

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.

Poner en false al hacer click
Poner en false al hacer click

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:

Botón que muestra y oculta contenido
Botón que muestra y oculta contenido

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.

texto del botón mostrar ocultar
Cambiar el texto del bótón

Publicado en: Curso Spring Boot y Angular Etiquetado como: directiva angular

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carlos ZR

  • Sígueme en Twitter
  • Política de Cookies
  • Política de Privacidad
  • Aviso Legal

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

CARLOSZR.COM
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.