Instalación de Angular Material

Integración con Angular Material

Angular Material es la implementación oficial de Material Design para Angular, proporcionando un conjunto completo de componentes de interfaz de usuario que siguen las especificaciones de Google. La integración con proyectos Angular modernos se ha simplificado considerablemente gracias al soporte nativo para componentes standalone.

Instalación mediante Angular CLI

La forma más sencilla de añadir Angular Material a un proyecto Angular es mediante el comando ng add, que automatiza todo el proceso de configuración:

ng add @angular/material

Durante la instalación, el comando te preguntará por varias opciones de configuración:

• Tema prediseñado: Puedes elegir entre varios temas preconstruidos como Indigo/Pink, Deep Purple/Amber, Pink/Blue Grey, o Purple/Green.
• Tipografía global: Si deseas aplicar los estilos tipográficos de Material Design globalmente.
• Animaciones del navegador: Si quieres incluir las animaciones de Angular que mejoran la experiencia de usuario.

Configuración automática

El comando ng add realiza automáticamente las siguientes tareas de configuración:

Instalación de dependencias: Añade los paquetes necesarios incluyendo @angular/material, @angular/cdk (Component Development Kit), y @angular/animations.

Configuración de estilos: Importa el tema seleccionado en el archivo styles.css global y añade los estilos base de Material Design.

Configuración de fuentes: Si seleccionaste la tipografía global, añade las fuentes Roboto y los iconos de Material Icons mediante enlaces CDN en el index.html.

/* Ejemplo de configuración automática en styles.css */
@import '@angular/material/prebuilt-themes/indigo-pink.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

Integración con componentes standalone

Angular Material funciona perfectamente con la arquitectura standalone de Angular 20. Para usar un componente de Material, simplemente importas el módulo correspondiente en el array imports de tu componente:

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@Component({
  selector: 'app-example',
  imports: [MatButtonModule, MatCardModule],
  template: `
    <mat-card>
      <mat-card-content>
        <p>Contenido de la tarjeta</p>
        <button mat-raised-button color="primary">
          Botón Material
        </button>
      </mat-card-content>
    </mat-card>
  `
})
export class ExampleComponent { }

Configuración de animaciones

Las animaciones de Angular son esenciales para que muchos componentes de Material funcionen correctamente. Si durante la instalación elegiste incluir animaciones, se añadirá automáticamente el provider correspondiente en tu app.config.ts:

import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    // otros providers...
  ]
};

Verificación de la instalación

Para confirmar que Angular Material se ha integrado correctamente, puedes crear un componente simple que use elementos de Material:

import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-test',
  imports: [MatToolbarModule, MatButtonModule, MatIconModule],
  template: `
    <mat-toolbar color="primary">
      <span>Mi aplicación Angular Material</span>
    </mat-toolbar>
    
    <div style="padding: 20px;">
      <button mat-fab color="accent">
        <mat-icon>add</mat-icon>
      </button>
    </div>
  `
})
export class TestComponent { }

Gestión de temas

Angular Material incluye varios temas predefinidos que puedes cambiar fácilmente modificando la importación en styles.css:

/* Temas disponibles */
@import '@angular/material/prebuilt-themes/indigo-pink.css';
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '@angular/material/prebuilt-themes/pink-bluegrey.css';
@import '@angular/material/prebuilt-themes/purple-green.css';

La integración de Angular Material proporciona una base sólida para crear interfaces de usuario modernas y consistentes, aprovechando la potencia del sistema de diseño de Google junto con las características avanzadas de Angular 20.

Componentes de Angular Material

Angular Material ofrece una amplia gama de componentes listos para usar que implementan las especificaciones de Material Design 3. Estos componentes están organizados en diferentes categorías según su funcionalidad y caso de uso.

Componentes de navegación

Los componentes de navegación ayudan a estructurar la aplicación y facilitan el movimiento entre diferentes secciones:

Toolbar y Sidenav

import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-navigation',
  imports: [
    MatToolbarModule, 
    MatSidenavModule, 
    MatListModule, 
    MatIconModule, 
    MatButtonModule
  ],
  template: `
    <mat-sidenav-container style="height: 100vh;">
      <mat-sidenav mode="side" opened>
        <mat-nav-list>
          <a mat-list-item href="#">
            <mat-icon>home</mat-icon>
            <span>Inicio</span>
          </a>
          <a mat-list-item href="#">
            <mat-icon>person</mat-icon>
            <span>Perfil</span>
          </a>
        </mat-nav-list>
      </mat-sidenav>
      
      <mat-sidenav-content>
        <mat-toolbar color="primary">
          <button mat-icon-button>
            <mat-icon>menu</mat-icon>
          </button>
          <span>Mi Aplicación</span>
        </mat-toolbar>
        
        <div style="padding: 20px;">
          <p>Contenido principal</p>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>
  `
})
export class NavigationComponent { }

Componentes de entrada de datos

Los componentes de formulario facilitan la captura y validación de información del usuario:

Input Fields y Select

import { Component } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-form-example',
  imports: [
    MatInputModule,
    MatSelectModule, 
    MatFormFieldModule,
    MatCheckboxModule,
    FormsModule
  ],
  template: `
    <div style="padding: 20px; max-width: 400px;">
      <mat-form-field appearance="fill">
        <mat-label>Nombre completo</mat-label>
        <input matInput [(ngModel)]="nombre" placeholder="Introduce tu nombre">
      </mat-form-field>
      
      <mat-form-field appearance="fill">
        <mat-label>País</mat-label>
        <mat-select [(ngModel)]="paisSeleccionado">
          <mat-option value="es">España</mat-option>
          <mat-option value="mx">México</mat-option>
          <mat-option value="ar">Argentina</mat-option>
        </mat-select>
      </mat-form-field>
      
      <mat-checkbox [(ngModel)]="aceptaTerminos">
        Acepto los términos y condiciones
      </mat-checkbox>
    </div>
  `
})
export class FormExampleComponent {
  nombre = '';
  paisSeleccionado = '';
  aceptaTerminos = false;
}

Componentes de layout

Los componentes de organización visual ayudan a estructurar el contenido de manera atractiva:

Cards y Grid List

import { Component } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-layout-example',
  imports: [MatCardModule, MatGridListModule, MatButtonModule],
  template: `
    <div style="padding: 20px;">
      <mat-grid-list cols="2" rowHeight="300px" gutterSize="16px">
        @for (producto of productos; track producto.id) {
          <mat-grid-tile>
            <mat-card style="width: 100%; height: 100%;">
              <mat-card-header>
                <mat-card-title>{{ producto.nombre }}</mat-card-title>
                <mat-card-subtitle>{{ producto.precio | currency:'EUR' }}</mat-card-subtitle>
              </mat-card-header>
              
              <mat-card-content>
                <p>{{ producto.descripcion }}</p>
              </mat-card-content>
              
              <mat-card-actions>
                <button mat-button color="primary">COMPRAR</button>
                <button mat-button>DETALLES</button>
              </mat-card-actions>
            </mat-card>
          </mat-grid-tile>
        }
      </mat-grid-list>
    </div>
  `
})
export class LayoutExampleComponent {
  productos = [
    { 
      id: 1, 
      nombre: 'Producto A', 
      precio: 29.99, 
      descripcion: 'Descripción del producto A' 
    },
    { 
      id: 2, 
      nombre: 'Producto B', 
      precio: 49.99, 
      descripcion: 'Descripción del producto B' 
    }
  ];
}

Componentes de datos

Los componentes de presentación de datos permiten mostrar información de forma organizada y accesible:

Table y Paginator

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';

@Component({
  selector: 'app-data-table',
  imports: [MatTableModule, MatPaginatorModule, MatSortModule],
  template: `
    <div style="padding: 20px;">
      <mat-table [dataSource]="usuarios" matSort>
        <ng-container matColumnDef="nombre">
          <mat-header-cell *matHeaderCellDef mat-sort-header>
            Nombre
          </mat-header-cell>
          <mat-cell *matCellDef="let usuario">
            {{ usuario.nombre }}
          </mat-cell>
        </ng-container>
        
        <ng-container matColumnDef="email">
          <mat-header-cell *matHeaderCellDef>
            Email
          </mat-header-cell>
          <mat-cell *matCellDef="let usuario">
            {{ usuario.email }}
          </mat-cell>
        </ng-container>
        
        <ng-container matColumnDef="activo">
          <mat-header-cell *matHeaderCellDef>
            Estado
          </mat-header-cell>
          <mat-cell *matCellDef="let usuario">
            @if (usuario.activo) {
              <span style="color: green;">Activo</span>
            } @else {
              <span style="color: red;">Inactivo</span>
            }
          </mat-cell>
        </ng-container>
        
        <mat-header-row *matHeaderRowDef="columnasVisibles"></mat-header-row>
        <mat-row *matRowDef="let row; columns: columnasVisibles;"></mat-row>
      </mat-table>
      
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>
      </mat-paginator>
    </div>
  `
})
export class DataTableComponent {
  columnasVisibles: string[] = ['nombre', 'email', 'activo'];
  usuarios = [
    { nombre: 'Ana García', email: 'ana@example.com', activo: true },
    { nombre: 'Carlos López', email: 'carlos@example.com', activo: false },
    { nombre: 'María Rodríguez', email: 'maria@example.com', activo: true }
  ];
}

Componentes de feedback

Los componentes de retroalimentación proporcionan información sobre el estado de la aplicación y las acciones del usuario:

Snackbar y Dialog

import { Component, inject } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-feedback-example',
  imports: [MatButtonModule],
  template: `
    <div style="padding: 20px;">
      <button mat-raised-button color="primary" (click)="mostrarSnackbar()">
        Mostrar Notificación
      </button>
      
      <button mat-raised-button color="accent" (click)="abrirDialog()">
        Abrir Dialog
      </button>
    </div>
  `
})
export class FeedbackExampleComponent {
  private snackBar = inject(MatSnackBar);
  private dialog = inject(MatDialog);
  
  mostrarSnackbar() {
    this.snackBar.open('¡Acción completada exitosamente!', 'Cerrar', {
      duration: 3000,
      horizontalPosition: 'center',
      verticalPosition: 'bottom'
    });
  }
  
  abrirDialog() {
    const dialogRef = this.dialog.open(DialogExampleComponent);
    
    dialogRef.afterClosed().subscribe(resultado => {
      if (resultado) {
        this.snackBar.open('Dialog cerrado con resultado: ' + resultado, 'OK');
      }
    });
  }
}

Estrategia de importación modular

Para optimizar el bundle de tu aplicación, Angular Material permite importar solo los módulos que realmente necesitas:

// Crear un archivo shared-material.module.ts
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatToolbarModule } from '@angular/material/toolbar';

const MaterialModules = [
  MatButtonModule,
  MatCardModule,
  MatInputModule,
  MatToolbarModule
];

@NgModule({
  imports: MaterialModules,
  exports: MaterialModules
})
export class SharedMaterialModule { }

Los componentes de Angular Material proporcionan una base sólida para construir interfaces de usuario profesionales y accesibles, manteniendo la consistencia visual y siguiendo las mejores prácticas de UX establecidas por Material Design.