Tutorial Angular: Layout con Angular Material

El layout con Angular Material es una solución que permite estructurar y organizar la interfaz de usuario de una aplicación Angular utilizando componentes flexibles y responsivos que siguen las mejores prácticas de diseño y usabilidad. 

Estos componentes están diseñados para proporcionar una experiencia de usuario consistente y visualmente atractiva en diferentes tipos de dispositivos y tamaños de pantalla.

En términos técnicos, la integración de Angular Material en un layout permite:

- Facilitar el diseño responsivo mediante el uso de directivas y componentes que se adaptan a diferentes resoluciones de pantalla.

- Utilizar una amplia gama de componentes preconstruidos como MatToolbar, MatSidenav, MatGridList, entre otros, que ayudan a organizar y estructurar de manera eficiente los distintos elementos visuales de la aplicación.

- Seguir los principios de Material Design, lo que garantiza una interfaz limpia, coherente y moderna.

- Mejorar la accesibilidad mediante componentes que ya integran buenas prácticas de accesibilidad (ARIA).

- Agilizar el desarrollo al reducir el tiempo necesario para crear interfaces de usuario complejas y responsivas.

Introducción al sistema de layout

El sistema de layout en Angular Material se basa principalmente en CSS Grid y Flexbox. Angular Material proporciona componentes y clases CSS que facilitan la creación de layouts complejos y responsivos.

Prerrequisitos

  1.- Tener un proyecto Angular configurado.

 2.- Instalar Angular Material ejecutando el siguiente comando:

ng add @angular/material

Este comando instalará Angular Material y Angular CDK, configurará angular.json, y agregará los estilos necesarios a la aplicación.

Durante este proceso, se te pedirá seleccionar un tema de Material Design, configurar las animaciones y añadir las configuraciones globales en Styles. Selecciona las opciones según conveniencia.

Importación de componentes de Angular Material

Para utilizar cualquier componente de Angular Material en tu aplicación Angular, es necesario importar el módulo correspondiente a ese componente. Este paso es crucial y se debe realizar para cada tipo de componente que desees utilizar.

El proceso general es el siguiente:

1. Importar el módulo del componente desde @angular/material.
2. Añadir el módulo importado a la lista de imports de tu componente (si es un componente standalone) o al array de imports de tu NgModule.

Este procedimiento permite que Angular sepa qué componentes estás utilizando y cargue solo el código necesario, lo que ayuda a optimizar el rendimiento de tu aplicación.

Veamos cómo se aplica esto usando el componente mat-card como ejemplo:

import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css'],
  standalone: true,
  imports: [
    MatCardModule,
    // Otros módulos que necesites
  ]
})
export class MiComponenteComponent {
  // Lógica del componente
}

Una vez importado, puedes usar el componente en tu plantilla HTML:

<mat-card>
  <mat-card-header>
    <mat-card-title>Título de la Tarjeta</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    Contenido de la tarjeta
  </mat-card-content>
</mat-card>

Componentes principales para layouts

Angular Material ofrece varios componentes clave para trabajar con layouts:

1. mat-grid-list: Para crear layouts basados en grillas.
2. mat-card: Para crear tarjetas con contenido.
3. mat-toolbar: Para crear barras de herramientas y encabezados.
4. mat-sidenav: Para crear menús laterales y layouts de tipo "drawer".

mat-toolbar

El componente MatToolbar proporciona una barra de herramientas que generalmente se utiliza como encabezado de la aplicación. Es ideal para incluir títulos, logotipos, botones de navegación, y más.

<mat-toolbar color="primary">
  <span>Mi Aplicación</span>
</mat-toolbar>

mat-grid-list

El componente MatGridList es útil para crear una cuadrícula responsiva de elementos. 

Permite definir filas y columnas que se adaptan a diferentes tamaños de pantalla.

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile>Tile 1</mat-grid-tile>
  <mat-grid-tile>Tile 2</mat-grid-tile>
  <mat-grid-tile>Tile 3</mat-grid-tile>
  <mat-grid-tile>Tile 4</mat-grid-tile>
</mat-grid-list>

Puedes ajustar el número de columnas y la altura de las filas según tus necesidades.

mat-card

Para presentar contenido de manera agrupada y estilizada, el componente MatCard se utiliza ampliamente. 

Es ideal para mostrar imágenes, títulos y copias de contenido bien organizadas.

<mat-card>
  <mat-card-header>
    <mat-card-title>Título de la Tarjeta</mat-card-title>
    <mat-card-subtitle>Subtítulo</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="imagen.jpg" alt="Imagen de la Tarjeta">
  <mat-card-content>
    <p>Contenido descriptivo dentro de la tarjeta.</p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Acción 1</button>
    <button mat-button>Acción 2</button>
  </mat-card-actions>
</mat-card>

Layout con mat-sidenav

El componente MatSidenav se emplea para crear un panel de navegación lateral. 

Puede estar oculto o visible dependiendo del estado de la aplicación (por ejemplo, visible en dispositivos más grandes y oculto en dispositivos móviles).

Para crear un layout de aplicación típico con barra lateral:

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" opened>
    <p>Elemento de Navegación</p>
  </mat-sidenav>

  <mat-sidenav-content>
    <p>Contenido Principal</p>
  </mat-sidenav-content>
</mat-sidenav-container>

Para abrir y cerrar el MatSidenav, puedes vincularlo a botones de la siguiente manera:

<mat-toolbar color="primary">
  <button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>Mi Aplicación</span>
</mat-toolbar>

Ejemplo completo

En el siguiente ejemplo, veremos cómo se pueden unir varios componentes clave de Angular Material para crear un layout completo y funcional. Este ejercicio práctico demuestra cómo mat-toolbar, mat-sidenav, mat-grid-list y mat-card trabajan en armonía para construir una interfaz de usuario robusta y responsive.

Código HTML:

<mat-toolbar color="primary">
  <button mat-icon-button (click)="toggleMenu()">
    <mat-icon>menu</mat-icon>
  </button>
  <span>Mi Tienda Online</span>
  <span class="toolbar-spacer"></span>
  <button mat-icon-button>
    <mat-icon>notifications</mat-icon>
  </button>
  <button mat-icon-button>
    <mat-icon>account_circle</mat-icon>
  </button>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav [opened]="isMenuOpen" mode="side">
    <mat-nav-list>
      <a mat-list-item>
        <mat-icon mat-list-icon>dashboard</mat-icon>
        <span>Dashboard</span>
      </a>
      <a mat-list-item>
        <mat-icon mat-list-icon>inventory</mat-icon>
        <span>Productos</span>
      </a>
      <a mat-list-item>
        <mat-icon mat-list-icon>shopping_cart</mat-icon>
        <span>Pedidos</span>
      </a>
      <a mat-list-item>
        <mat-icon mat-list-icon>people</mat-icon>
        <span>Clientes</span>
      </a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <div class="content-container">
      <h1>Productos Destacados</h1>

      <mat-grid-list cols="2" rowHeight="2:1" gutterSize="16px">
        <mat-grid-tile *ngFor="let product of products">
          <mat-card class="product-card">
            <img mat-card-image [src]="product.image" [alt]="product.name">
            <mat-card-content>
              <h2>{{product.name}}</h2>
              <p>Precio: ${{product.price}}</p>
              <p>Stock: {{product.stock}}</p>
            </mat-card-content>
            <mat-card-actions>
              <button mat-button color="primary">Editar</button>
              <button mat-button color="warn">Eliminar</button>
            </mat-card-actions>
          </mat-card>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Así se vería en el navegador:

Responsividad

Angular Material está diseñado para ser responsivo por defecto. Sin embargo, puedes usar las clases de utilidad de Angular Material para ajustar el comportamiento en diferentes tamaños de pantalla:

<div class="mat-headline-5 mat-headline-5-sm">Título responsivo</div>

Estas clases se ajustarán automáticamente según el tamaño de la pantalla.

Espaciado y alineación

Angular Material proporciona clases CSS para espaciado y alineación:

<div class="mat-elevation-z2 mat-p-4">
  Contenido con sombra y padding
</div>

<div class="mat-text-center">
  Texto centrado
</div>

Flexbox con Angular Material

Aunque Angular Material no proporciona directivas específicas para Flexbox, puedes usar Flexbox directamente con las clases de Angular Material:

<div class="mat-display-flex mat-justify-content-between">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>