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.

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.