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
|
1 |
constructor(private ddrSpinner: DdrSpinnerService) { } |
En el HTML, debes colocar el selector del componente ddr-spinner, mi recomendación es ponerlo al final.
|
1 |
Si quieres activar el spinner para que se muestre, desde el ts se puede activar:
|
1 2 3 |
activarSpinner(){ this.ddrSpinner.showSpinner(); } |
Para desactivarlo, tenemos otro método para ello.
|
1 2 3 |
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.
[ufwp id=»2167310″]Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta