Como instalar y utilizar DDR ClickOutside de la biblioteca DDR

Hola a todos, hoy os voy a explicar como podemos instalar y utilizar el componente DDR ClickOutside de la biblioteca DDR.

Aquí puedes ver la documentación del componente.

El componente ddr-click-outside es una directiva que dispara un evento cuando se pulsa fuera de ese elemento.

Para instalar el componente, abre una terminal y escribe: npm i ddr-click-outside

Después, debes agregar el módulo DdrClickOutsideModule a tu app.module.ts

Para utilizarlo, en el HTML debes poner la directiva en el elemento que quieras que se lance el evento al hacer click fuera del mismo. Algo asi:



<div ddrClickOutside (clickOutside)="clickOutside($event)">
  
   Click outside this div

</div>


Podemos habilitar o deshabilitar el evento con la propiedad clickOutsideEnabled.

También podemos hacer que se retrase x tiempo con clickOutsideDelay. Recuerda ponerlo en milisegundos.

Te dejo un ejemplo en vivo:

 

Recuerda que si quieres aprender a como realizar la tuya, lo puedes ver en nuestro curso de angular de Crea tu propia biblioteca de componente con Angular.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

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