Como instalar y utilizar Load Iframe de la biblioteca DDR

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

Aquí puedes ver la documentación del componente.

El componente ddr-load-iframe es una directiva para indicar cuando se carga un iframe.

Para instalar el componente, abre una terminal y escribe: npm i ddr-load-iframe

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

Para utilizarlo, debes hacer lo siguiente, en cualquier iframe que tengas, puedes poner el evento loadIframe. Recuerda de añadir la directiva ddrLoadIframe


<iframe src="https://discoduroderoer.es" ddrLoadIframe (loadIframe)="load()"></iframe>

<ddr-spinner></ddr-spinner>

Cuando el iframe se cargue se llamara a la función que indiqueis:


export class DdrLoadIframeDemo {

  constructor(private ddrSpinner: DdrSpinnerService) {
    this.ddrSpinner.showSpinner();
  }

  load() {
    console.log("Load iframe");
    this.ddrSpinner.hideSpinner();
  }
}


Recomiendo combinarlo con un spinner.

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 *