change - page title angular 4

¿Cómo importar material angular en el proyecto?

Question

He instalado Angular Material Design. Ahora trato de agregar esto en el archivo app.module.ts :

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

¿Qué debo decirte en la sección: imports: [] ? que cargar todas las entidades materiales.

Intenté: imports: [''MaterialModule''] pero está en desuso

Answer 1

Paso 1

yarn add @angular/material @angular/cdk @angular/animations

Paso 2: cree un nuevo archivo (/myApp/src/app/material.module.ts) que incluya todos los módulos de interfaz de usuario de material (no hay acceso directo, debe incluir módulos individuales uno por uno)

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 {}

Paso 3: importe y agregue ese módulo recién creado a su app.module.ts

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { AppComponent } from ''./app.component'';
import { MaterialModule } from ''./material.module''; // material module imported

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule // MAteria module added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

El MaterialModule quedó en desuso en la versión beta3 con el objetivo de que los desarrolladores solo importen a sus aplicaciones lo que van a usar y, por lo tanto, mejoren el tamaño del paquete.

Los desarrolladores tienen ahora 2 opciones:

• Cree un MyMaterialModule personalizado que importe / exporte los componentes que requiere su aplicación y que otros módulos (de características) puedan importar en su aplicación.
• Importe directamente los módulos de material individuales que un módulo requiere en él.

Tome lo siguiente como ejemplo (extraído de material.angular.io/guide/getting-started )

Primer enfoque:

import {MdButtonModule, MdCheckboxModule} from ''@angular/material'';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

Luego puede importar este módulo a cualquiera de los suyos.

Segundo enfoque:

import {MdButtonModule, MdCheckboxModule} from ''@angular/material'';

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

Ahora puede usar los componentes de material respectivos en todos los componentes declarados en PizzaPartyAppModule

Vale la pena mencionar lo siguiente:

• Con la última versión del material, debe importar BrowserAnimationsModule en su módulo principal si desea que las animaciones funcionen
• Con la última versión, los desarrolladores ahora deben agregar @angular/cdk a su package.json (dependencia de material)
• Importe los módulos de material siempre después de BrowserModule , como lo indican los documentos:

Independientemente del enfoque que utilice, asegúrese de importar los módulos de material angular después del módulo de navegador de Angular, ya que el orden de importación es importante para NgModules.

Answer 3

MaterialModule se depreció en la versión 2.0.0-beta.3 y se eliminó por completo en la versión 2.0.0-beta.11. Vea este CHANGELOG más detalles. Por favor revisa los cambios de última hora.

Rompiendo cambios

• El material angular ahora requiere angular 4.4.3 o superior
• MaterialModule ha sido eliminado.
• Para beta.11, tomamos la decisión de desaprobar completamente el prefijo "md" y usar "mat" en adelante.

Por favor, vaya a CHANGELOG ¡obtendremos más respuestas!

Ejemplo que se muestra debajo de cmd

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

Crear archivo (material.module.ts) dentro de la carpeta ''aplicación''

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 en app.module.ts

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

Su archivo html componente

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

Agregue css global ''style.css''

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

Su 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;
}

Si alguno no obtuvo salida, use las instrucciones a continuación

en lugar de la interfaz anterior (material.module.ts), puede usar directamente el siguiente código también en 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'';

Entonces este caso no quieres importar

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

en el app.module.ts

Answer 4

Si desea importar todos los módulos de Material, cree su propio módulo, es decir, material.module.ts y haga algo como lo siguiente:

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 { }

Luego importe el módulo a su app.module.ts

Answer 5

Haga clic aquí para ver la captura de pantalla del mensaje de error

Si está recibiendo este error "compiler.js: 2430 Error no detectado: Directiva inesperada ''MatIcon'' importada por el módulo ''AppModule''. Agregue una anotación @NgModule"

No importe MatIcon desde @ angular / material.

Simplemente importe a continuación: importe {MatIconModule} desde ''@ angular / material'';

¿Cómo importar material angular?

Puede ejecutar debajo del comando. ng add @ angular / material