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.

Crea tu propia biblioteca de componente con Angular 8/9Disco Duro de Roer, Desarrollador de aplicaciones en Indra y profesor particularGlobaliza tu código con una biblioteca o libreria€199.99€129.99 4.3 (15 ratings)

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