jairogarcíarincón

Introducción

En este apartado desarrollaremos el layout de nuestro sitio, esto es, la plantilla global común sobre la que se mostrará la información de las diferentes páginas.

Creación de un tema de estilos

Empezaremos creando un nuevo fichero de tipo scss para crear un nuevo tema de colores tanto para el modo claro como para el modo oscuro.

Realmente, estamos utilizando una de las plantillas de colores ya establecidas por Angular Material, pero se ha creado de nuevo para ver cuál sería el proceso en caso de necesitar una plantilla personalizada, que es lo normal en el uso diario.

Crea un nuevo archivo llamado _theme.scss con el siguiente contenido y añadelo a tu proyecto en la ruta /src:

04-_theme.scss

Analiza bien el contenido de dicho archivo y presta atención a los comentarios, pues en ellos está la clave del funcionamiento. Apreciarás además que sehan incluido algunos mixins para utilizarlos más adelante en los distintos componentes.

Para finalizar e incluir el tema en tu sitio web, modifica cada ocurrencia de la propiedad"styles" que encuentres en el archivo angular.json que se encuentra en la raíz de tu proyecto, de modo que quede de la siguiente forma:

"styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    ""src/_theme.scss",
    ""src/styles.scss"
],


NOTA: Si en la instalación elegiste un tema por defecto diferente a indigo-pink, será ese el que aparezca.

Componente app

Este componente será el responsabe del layout de nuestra aplicación, y contendrá lo siguiente:

• contenedor main principal
• header con barra superior y menú de navegación superior
• sidenav con menú de navegación lateral
• contenedor section para albergar el contenido de la ruta (router-outlet)
• footer para cerrar la página

Para conseguirlo, partiremos de un componente sidenav responsive de Angular, que a suvez utiliza muchos otros componentes de Angular y que modificaremos para adaptarlos a nuestras necesidades.

Modifica el contenido de los ficheros app.component.ts, app.component.html y app.component.scss para que tengan el siguiente contenido, y presta atención a los comentarios:

05-app.component.ts

06-app.component.html

07-app.component.scss

Una vez guardado todo lo anterior, si ahora lanzas tu proyecto, el resultado debería ser similar al de las siguientes imágenes:

Referencias

Tools for picking colors
Theming angular material
Responsive sidenav

---

Publicado el 28 de Enero de 2025

angular angular material material sass diseño responsive