Vamos a crear un botón que cambie de estilo cuando se hace click en él para que parezca que está cargando algún proceso.
El botón va a tener un icono de guardado y un texto. Vamos a hacer que, cuando pulsemos en el botón:
1. Cambie el icono del botón.
2. Cambie el texto del botón.
3. Se desactive el botón.
Una vez que se haya terminado de ejecutar el proceso correspondiente (nosotros sólo vamos a ejecutar un proceso que no haga nada durante 3 segundos) el botón volverá a quedar como antes de hacer click en él.
Para empezar, modificamos el TypeScript como sigue:
Como se puede ver, hemos creado una variable booleana "loading" o cargando que inicializamos a falso. Luego hemos creado una función "ejecutar" que lo único que hace es poner la variable "loading" a verdadero, esperar 3 segundos, y luego volver a cambiarla a falso.
Modificamos el html como sigue:
Como se puede ver, hemos creado un botón que llama a la función "ejecutar" y cuyo atributo "disabled" depende de la variable "loading" del TypeScript.
Dentro del botón hay un icono cuya clase (imagen, por tanto) depende de la variable "loading", mostrando una clase u otra dependiendo de si la variable es verdadera o falsa.
Por último, dentro del botón también hay dos textos, en los que hemos incluido la directiva *ngIf para que se muestren o no los textos en el botón dependiendo del valor de la variable "loading".
Con esto estaría todo. Arrancamos la aplicación y el botón se debería mostrar así:
Y cuando hacemos click en el botón se mostraría así:
Pasados 3 segundos, el botón vuelve a su aspecto original. Y eso es todo.
No hay comentarios:
Publicar un comentario