Hola a todos, hoy os voy a explicar como podemos instalar y utilizar el componente DDR Spinner de la biblioteca DDR.
Aquí puedes ver la documentación del componente.
El componente ddr-spinner es un componente para mostrar un spinner. Se puede iniciar o parar cuando el usuario quiera.
Para instalar el componente, abre una terminal y escribe: npm i ddr-spinner
Después, debes agregar el módulo DdrSpinerModule a tu app.module.ts
Para utilizarlo, debes hacer lo siguiente:
En el componente que quieras utilizarlo, debes inyectar el servicio DdrSpinnerService
constructor(private ddrSpinner: DdrSpinnerService) { }
En el HTML, debes colocar el selector del componente ddr-spinner, mi recomendación es ponerlo al final.
<ddr-spinner></ddr-spinner>
Si quieres activar el spinner para que se muestre, desde el ts se puede activar:
activarSpinner(){
this.ddrSpinner.showSpinner();
}
Para desactivarlo, tenemos otro método para ello.
desactivarSpinner(){
this.ddrSpinner.hideSpinner();
}
También tenemos una propiedad llamada embedded que hace que el spinner se adapte al div relativo que lo contenga, recuerda que el div debe tener como estilo position: relative para que funcione embebido.
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.
Deja una respuesta