Instalar Angular Material

Español | English

La instalación de Angular Material (opens new window) está completamente guiada a través de Angular CLI, por lo que al ejecutar el comando ng add @angular/material en nuestra aplicación, podremos instalar todo lo necesario.

Una de las partes más importantes de la instalación es aquella en la que se nos pregunta por el tema que queremos usar en nuestra aplicación. Para ello, el instalador nos ofrece la posibilidad de seleccionar alguno de los temas predefinidos (Indigo/Pink, Deep Purple/Amber, Pink/Blue Grey o Purple/Green) o nuestro propio tema personalizado.

Si estás interesado en saber cómo crear un tema personalizado, te recomiendo que le eches un vistazo a este otro artículo sobre cómo crear un tema para Angular Material.

Además del tema, también se nos preguntará por si queremos que la tipografía de Angular Material se aplique a toda la aplicación y si queremos habilitar las animaciones para Angular Material.

Una vez completada la instalación, se habrán producido los siguientes cambios en nuestro proyecto:

• Se habrán añadido todas las dependencias necesarias al fichero package.json.
• Si hemos seleccionado usar un tema predefinido, se habrá modificado el fichero angular.json para incluirse la hoja de estilos correspondiente (por ejemplo "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css") en las listas de estilos de las secciones architect.build.options.styles y architect.test.options.styles.
• Si en su lugar, hemos seleccionado usar un tema personalizado, se habrá modificado el fichero styles.scss para la inclusión de un tema personalizado de ejemplo basado en el tema Indigo/Pink para que hagamos los cambios que necesitemos para nuestro tema.
• Al fichero styles.scss se habrán añadido los estilos básicos para los elementos html y body.
• Al fichero index.html se habrán agregados las referencias necesarias a las fuentes de Google.
• Si hemos seleccionado aplicar la tipografía de Angular Material a toda la aplicación, se habrá agregado la clase mat-typography al elemento body del fichero index.html.
• Si hemos seleccionado habilitar las animaciones de Angular Material, al fichero app.module.ts se habrá añadido el módulo BrowserAnimationsModule a nuestras importaciones, en caso contrario, se habrá añadido el módulo NoopAnimationsModule.

Una vez tengamos todo configurado, ya podemos hacer uso de Angular Material y empezar a importar los módulos de los componentes que queramos incluir en nuestra aplicación:

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatSliderModule } from '@angular/material/slider';
…
const materialModules = [
  MatButtonModule,
  MatCardModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatSliderModule
];

@NgModule ({....
  imports: [...,
  ...materialModules
  ]
})

app.module.ts (o cualquier otro módulo)

Y así poder empezar a integrarlos en nuestros componentes:

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

<button mat-button>Botón</button>

<mat-card>
  <mat-calendar></mat-calendar>
</mat-card>

app.component.html

---