Como importar material angular em projeto?

Eu instalei o Angular Material Design. Agora eu tento adicionar isso no arquivo app.module.ts :

 import { MaterialModule } from '@angular/material'; 

O que eu deveria decifrar na seção: imports: [] ? que para carregar todas as entidades materiais.

Eu tentei: imports: ['MaterialModule'] mas ele está obsoleto

O MaterialModule foi depreciado na versão 2.0.0-beta.3 e foi removido completamente na versão 2.0.0-beta.11. Veja este CHANGELOG para mais detalhes. Por favor, vá até as mudanças.

Quebrando mudanças

  • Material Angular agora requer Angular 4.4.3 ou superior
  • MaterialModule foi removido.
  • Para o beta.11, tomamos a decisão de desaprovar completamente o prefixo “md” e usar “mat” no futuro.

Por favor, passe por CHANGELOG e receba mais respostas!

Exemplo mostrado abaixo cmd

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

Criar arquivo (material.module.ts) dentro da pasta ‘app’

 import { NgModule } from '@angular/core'; import { MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule } from '@angular/material'; @NgModule({ imports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ], exports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ] }) export class MaterialModule {} 

importar em app.module.ts

 import { MaterialModule } from './material.module'; 

Seu arquivo html componente

 
mood Yay, Material in Angular 2!

Adicionar global css ‘style.css’

 @import '~https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

Seu componente css

 body { margin: 0; font-family: Roboto, sans-serif; } mat-card { max-width: 80%; margin: 2em auto; text-align: center; } mat-toolbar-row { justify-content: space-between; } .done { position: fixed; bottom: 20px; right: 20px; color: white; } 

Se alguém não obteve o uso de saída abaixo da instrução

em vez de interface acima (material.module.ts) u pode usar diretamente abaixo do código também no app.module.ts.

 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MatAutocompleteModule, MatInputModule,MatFormFieldModule } from '@angular/material'; 

Então, neste caso, você não quer importar

 import { MaterialModule } from './material.module'; 

no app.module.ts

Se você quiser importar todos os módulos de Material, crie seu próprio módulo, isto é, material.module.ts e faça algo como o seguinte:

 import { NgModule } from '@angular/core'; import * as MATERIAL_MODULES from '@angular/material'; export function mapMaterialModules() { return Object.keys(MATERIAL_MODULES).filter((k) => { let asset = MATERIAL_MODULES[k]; return typeof asset == 'function' && asset.name.startsWith('Mat') && asset.name.includes('Module'); }).map((k) => MATERIAL_MODULES[k]); } const modules = mapMaterialModules(); @NgModule({ imports: modules, exports: modules }) export class MaterialModule { } 

O MaterialModule foi preterido na versão beta3 com o objective de que os desenvolvedores só importassem para seus aplicativos o que eles vão usar e, assim, melhorar o tamanho do pacote.

Os desenvolvedores agora têm 2 opções:

  • Crie um MyMaterialModule customizado que importe / exporte os componentes que seu aplicativo requer e possa ser importado por outros módulos (resources) em seu aplicativo.
  • Importe diretamente os módulos de material individuais que um módulo requer para ele.

Veja o seguinte como exemplo (extraído da página de material )

Primeira abordagem:

 import {MdButtonModule, MdCheckboxModule} from '@angular/material'; @NgModule({ imports: [MdButtonModule, MdCheckboxModule], exports: [MdButtonModule, MdCheckboxModule], }) export class MyOwnCustomMaterialModule { } 

Então você pode importar este módulo para qualquer um dos seus.

Segunda abordagem:

 import {MdButtonModule, MdCheckboxModule} from '@angular/material'; @NgModule({ ... imports: [MdButtonModule, MdCheckboxModule], ... }) export class PizzaPartyAppModule { } 

Agora você pode usar os respectivos componentes de material em todos os componentes declarados no PizzaPartyAppModule

Vale a pena mencionar o seguinte:

  • Com a versão mais recente do material, você precisa importar o BrowserAnimationsModule para o módulo principal se quiser que as animações funcionem
  • Com a versão mais recente, os desenvolvedores agora precisam adicionar @angular/cdk ao seu package.json (dependência de material)
  • Importe os módulos de material sempre após o BrowserModule , conforme indicado pelos documentos:

Qualquer que seja a abordagem que você usa, certifique-se de importar os módulos de Material Angular após o BrowserModule do Angular, já que o pedido de importação é importante para o NgModules.