Comenzando con angular-material2

Envolviendo todos los módulos juntos

También puede envolver fácilmente todos los módulos angulares, que va a utilizar, en un solo módulo:

import { NgModule } from '@angular/core';
import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
 
@NgModule({
    imports: [
        BrowserAnimationsModule,
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ],
    exports: [
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ]
})
export class MaterialWrapperModule {}

Después de eso, simplemente importa tu módulo al módulo principal de la aplicación:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { MaterialWrapperModule } from './material-wrapper.module.ts';
import { AppComponent } from './app.component';


@NgModule({
    imports: [
        BrowserAnimationsModule, 
        MaterialWrapperModule,
        CommonModule,
        // This is optional, use it when you would like routing in your app
        // RouterModule.forRoot([
        //     { path: '', component: HomeView, pathMatch: 'full'}
        // ])
    ],
    declarations: [ AppComponent],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

Instalación y configuración desde maestro con Angular CLI

Este ejemplo será cómo instalar desde el maestro y también usará @angular/cli.

  1. Haz un nuevo proyecto con @angular/cli:
   ng new my-master-app

Si no ha instalado @angular/cli, use este comando:

   npm install -g @angular/cli
  1. Instalar desde maestro:
   npm install --save @angular/animations
   npm install --save angular/material2-builds
   npm install --save angular/cdk-builds
  1. Siga la misma guía que la anterior.

¡Hecho!

Instalación o configuración con Angular CLI

En este ejemplo, usaremos @angular/cli (más reciente) y la última versión de @angular/material. Al menos debe conocer los conceptos básicos de Angular 2/4 antes de continuar con los pasos a continuación.

  1. Instale el módulo de material angular desde npm:
   npm install @angular/material --save

Esto solo se aplica a las versiones 2.0.0-beta.3 y superiores.

Instala el módulo @angular/animations:

npm install @angular/animations --save

Esto solo se aplica a las versiones 2.0.0-beta.8 y superiores.

Instale el módulo @angular/cdk:

npm install @angular/cdk --save

  1. En su módulo de aplicación, importe los componentes que va a utilizar:

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
     imports: [
         BrowserAnimationsModule,
         MdButtonModule,
         MdSnackBarModule,
         MdSidenavModule,
         CommonModule,
         // This is optional unless you want to have routing in your app
         // RouterModule.forRoot([
         //     { path: '', component: HomeView, pathMatch: 'full'}
         // ])
     ],
     declarations: [ AppComponent ],
     boostrap: [ AppComponent ]
})
export class AppModule {}

¡Ahora está listo para usar material angular en sus componentes!

Nota: Los documentos para componentes específicos estarán disponibles pronto.

Configurar temas, compatibilidad con gestos e íconos de materiales

Tema:

Se requiere un tema para que los componentes materiales funcionen correctamente dentro de la aplicación.

Angular Material 2 proporciona cuatro temas prediseñados:

  • morado oscuro-ámbar
  • rosa índigo
  • rosa-azul gris
  • verde púrpura

Si está utilizando Angular CLI, puede importar uno de los temas preconstruidos en style.css.

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

El tema también se puede agregar usando <link> en index.html.

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

MartilloJS

Agregue HammerJS a la aplicación a través de CDN o npm:

npm install --save hammerjs

En su módulo raíz, generalmente app.module.ts, agregue la declaración de importación:

import 'hammerjs';

Iconos de materiales:

A menos que se proporcionen íconos personalizados, Angular Material 2 <md-icon> espera íconos de materiales.

En index.html añadir:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
selector de fecha md →