Angular: Integración con Angular Material

Para comenzar con la integración de Angular Material en Angular 18, primero debemos instalar los paquetes necesarios. Abre tu terminal y ejecuta los siguientes comandos:

ng add @angular/material

Este comando no solo instalará Angular Material, sino que también configurará algunos estilos predeterminados y temas básicos.

Configuración de temas

Angular Material ofrece una variedad de temas predefinidos que puedes utilizar. Para configurar un tema, edita el archivo styles.scss en tu proyecto Angular 18:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

También puedes crear temas personalizados para adaptarlos a las necesidades específicas de tu aplicación.

Importación de módulos de Angular Material

Una vez instalado Angular Material, es necesario importar los módulos necesarios en tu aplicación. Por ejemplo, si deseas utilizar un botón de Angular Material, debes importar el módulo correspondiente en tu archivo app.module.ts:

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    // tus componentes
  ],
  imports: [
    // otros módulos
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Uso de componentes de Angular Material

Con los módulos importados, puedes empezar a utilizar los componentes de Angular Material en tus plantillas. A continuación se muestra un ejemplo de cómo utilizar un botón de Angular Material:

<button mat-button>Click me!</button>

Este botón utilizará los estilos y comportamientos definidos por Angular Material.

Formularios con Angular Material

Angular Material también proporciona componentes para formularios, que incluyen entradas, selectores y controles deslizantes. Para utilizar estos componentes, primero importa los módulos necesarios:

import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    MatInputModule,
    MatFormFieldModule
  ]
})
export class AppModule { }

Luego, puedes utilizar estos componentes en tus plantillas:

<mat-form-field>
  <mat-label>Nombre</mat-label>
  <input matInput placeholder="Introduce tu nombre">
</mat-form-field>

Tablas con Angular Material

Las tablas son otro componente útil de Angular Material. Para utilizarlas, importa el módulo correspondiente:

import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    MatTableModule
  ]
})
export class AppModule { }

Y utiliza el componente en tu plantilla:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>