Angular: 17. Componente Loading, o Cargando

Vamos a crear un componente para que aparezca una imagen de cargando al entrar en la página y que desaparezca cuando se haya cargado completamente.

Primero creamos un nuevo componente "loading" o el nombre que queramos:

Aunque podemos utilizar una imagen cualquiera como símbolo de "cargando", nosotros vamos a utilizar una ya creada para tal fin.
Entramos en la página "https://fontawesome.com/" y copiamos el enlace a la hoja de estilos que nos proporciona la página:

Pegamos el enlace en nuestro "index.html" tal y como hicimos con Bootstrap:

Volvemos a la página de fontawesome y buscamos iconos por "refresh". Así vemos la imagen que vamos a utilizar:

Editamos el "html" del componente "cargando" para que muestre la imagen:

Se puede ver que hemos utilizado la etiqueta <i> (propia de fontawesome) para mostrar la imagen, pero si utilizamos una propia nuestra utilizaremos la etiqueta normal "html".

Como hemos dicho antes, la idea es que la imagen se muestre en la página desde el principio y que desaparezca cuando esté toda la página cargada. Para ello, utilizaremos una variable booleana que sirva para indicar cuándo debe o no mostrarse la imagen.

Modificamos el TypeScript del componente donde queremos que aparezca la imagen como sigue:

Como se puede ver, declaramos dentro de la clase una variable booleana, que inicializamos a verdadero al principio del constructor, y cambiamos a falso al final de la función que trae los datos a la página.

Por último, en el "html" del componente donde queremos que aparezca la imagen, colocamos la etiqueta del componente "loading". Le incluimos la directiva "*ngIf" para que muestre la imagen mientras la variable booleana del componente esté a verdadero:

Y eso es todo. Al iniciar la página, la variable booleana será verdadera y se mostrará la imagen en pantalla. Una vez que todos los datos de la página estén cargados, la variable booleana cambiará de valor a falso y la imagen de carga desaparecerá.