Instalar Angular Material

Paso 1: Instale material angular, CDK angular y animaciones angulares

Puede usar la herramienta de línea de comandos npm o yarn para instalar paquetes. Use lo que sea apropiado para su proyecto en los ejemplos a continuación.

 NPM

npm install --save @angular/material @angular/cdk @angular/animations

Alternativa 1: compilación instantánea

También está disponible una compilación de instantáneas con los últimos cambios del maestro. Tenga en cuenta que esta compilación de instantáneas no debe considerarse estable y puede interrumpirse entre versiones.

 NPM
npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds

 Paso 2: configurar animaciones

Una vez que el paquete de animaciones esté instalado, impórtelo BrowserAnimationsModuleen su aplicación para habilitar el soporte de animaciones.
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }


Alternativamente, puede desactivar las animaciones importando NoopAnimationsModule.
import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }


 Paso 3: Importar los módulos de componentes

Importe el NgModule para cada componente que quiera usar:
import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }


Alternativamente, puede crear un NgModule independiente que importe todos los componentes de material angular que usará en su aplicación. Luego puede incluir este módulo donde quiera que desee usar los componentes.
import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }


Cualquiera que sea el enfoque que utilice, asegúrese de importar los módulos de Material Angular después de los de Angular BrowserModule, ya que el orden de importación es importante para NgModules.

 Paso 4: incluir un tema

Se requiere la inclusión de un tema para aplicar todos los estilos de núcleo y tema a su aplicación.

Para comenzar con un tema creado previamente, incluya uno de los temas creados previamente de Angular Material globalmente en su aplicación. Si está utilizando la CLI angular, puede agregar esto a su styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";


Si no está utilizando la CLI angular, puede incluir un tema creado previamente a través de un <link>elemento en su index.html.

Para obtener más información sobre temas y las instrucciones sobre cómo crear un tema personalizado, consulte la guía de temas .

 Paso 5: Apoyo gestual

Algunos componentes ( mat-slide-toggle, mat-slider, matTooltip) se basan en HammerJS de gestos. Para obtener el conjunto completo de características de estos componentes, HammerJS debe cargarse en la aplicación.

Puede agregar HammerJS a su aplicación a través de npm , un CDN (como el CDN de Google ) o directamente desde su aplicación.

Para instalar a través de npm, use el siguiente comando:

 NPM
npm install --save hammerjs


 Hilo
yarn add hammerjs


Después de la instalación, impórtelo en el punto de entrada de su aplicación (por ejemplo src/main.ts).
import 'hammerjs';


 Paso 6 (Opcional): Agregar iconos de material

Si desea utilizar el mat-iconcomponente con los iconos oficiales de Material Design , cargue la fuente del icono en su archivo index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


Para obtener más información sobre el uso de Iconos de materiales, consulte la Guía de iconos de materiales .

Tenga en cuenta que mat-iconsoporta cualquier fuente o iconos svg; El uso de Material Icons es una de las muchas opciones.

 Apéndice: Configurando SystemJS

Si su proyecto utiliza SystemJS para la carga de módulos, deberá agregar @angular/materialy @angular/cdka la configuración de SystemJS.

El @angular/cdkpaquete está organizado de múltiples puntos de entrada. Cada uno de estos puntos de entrada debe registrarse individualmente con SystemJS.

Aquí hay una configuración de ejemplo donde @angular/material, @angular/cdk/platformy @angular/cdk/a11yse usan:
System.config({
  // Existing configuration options
  map: {
    // ...
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

    // CDK individual packages
    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
    // ...
    'hammerjs': 'npm:hammerjs',
  },
  packages: {
    //...
    hammerjs: {main: './hammer.min.js', defaultExtension: 'js'}
    //...
  }
});

Fuente: Material Angular