Componente Home
Introducción
En este apartado configuraremos el componente encargado de mostrar el contenido de la página principal o home. Este contenido consistirá en un listado de tarjetas distribuídas en una parrilla o grid con el contenido básico de cada casa, esto es, titulo, imagen, entradilla y fecha, así como un enlace a la casa correspondiente. Todos los ficheros a modificar se encuentran dentro de la ruta /src/app/home.El fichero home.component.ts
Este fichero será el encargado de importar todos los componentes necesarios para conseguir nuestro objetivo, incluyendo el archivo JSON con los datos de cada casa, de modo que la vista lo tenga disponibles. Además, de manera similar a como hicimos en AppComponent, obtendrá el valor de la variable tabletQuery, que nos permitirá adaptar el contenido de la vista en función del anchod e la pantalla. Modifica el fichero para que incluya el siguiente contenido y fíjate en los comentarios para entender bien su funcionamiento: 08-home.component.tsEl fichero home.component.html
En este fichero mostraremos el contenido del componente, recorriendo todas las casas y mostrando los datos en forma de grid de tarjetas. Modifica el fichero para que incluya el siguiente contenido: 09-home.component.htmlEl fichero home.component.scss
Por último, para dar estilo al contenido anterior, en este fichero añadiremos las clases necesarias para asegurarnos un diseño responsive y con modos claro y oscuro: Modifica el fichero para que incluya el siguiente contenido, prestando atención a los comentarios: 10-home.component.scss Las siguientes cuatro imágenes muestran cómo debería quedar el contenido en escritorios y móviles, para los modos claro y oscuro:
Fuente: Elaboración propia
Fuente: Elaboración propia
Fuente: Elaboración propia
Fuente: Elaboración propia