web-dev-qa-db-fra.com

Comment importer un matériau angulaire dans un projet?

J'ai installé Angular Material Design. Maintenant, j'essaie d'ajouter ceci dans le fichier app.module.ts:

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

Ce que je devrais décider dans la section: imports: []? que pour charger toutes les entités matérielles.

J'ai essayé: imports: ['MaterialModule'] mais c'est obsolète

angularangular-material
24
OPV

MaterialModule a été amorti dans la version 2.0.0-beta.3 et complètement supprimé dans la version 2.0.0-beta.11. Voir ceci CHANGELOG pour plus de détails. S'il vous plaît passer par les changements de rupture.

Briser les changements

  • Le matériau angulaire nécessite désormais un angulaire supérieur ou égal à 4.4.3 
  • MaterialModule a été supprimé.
  • Pour la bêta.11, nous avons pris la décision de déconseiller complètement d'utiliser le préfixe "md" Et d'utiliser "mat" pour aller de l'avant.

S'il vous plaît passez par CHANGELOG nous aurons plus de réponse!

Exemple présenté ci-dessous Cmd 

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

Créer un fichier (material.module.ts) dans le dossier '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 {}

importer sur app.module.ts

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

Votre fichier HTML composant 

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

Ajouter un css global 'style.css' 

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

Votre composant 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 quelqu'un n'a pas eu de sortie, utilisez l'instruction ci-dessous

au lieu de l'interface ci-dessus (material.module.ts), vous pouvez directement utiliser le code ci-dessous également dans 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';

Donc, ce cas vous ne voulez pas importer 

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

dans le app.module.ts

62
Rijo

Si vous souhaitez importer les modules all Material, créez votre propre module, à savoir material.module.ts, et procédez comme suit:

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

Puis importez le module dans votre app.module.ts

9
Taylor

La MaterialModule était obsolète dans la version beta3 avec pour objectif que les développeurs n'importent que ce qu'ils vont utiliser dans leurs applications et améliorent ainsi la taille de l'ensemble.

Les développeurs ont maintenant 2 options:

  • Créez une variable customMyMaterialModule qui importe/exporte les composants requis par votre application et qui peut être importée par d'autres modules (fonctions) dans votre application.
  • Importez directement les modules de matériaux individuels qu’un module requiert.

Prenez l'exemple suivant (extrait de page de matériel )

Première approche:

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

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

Ensuite, vous pouvez importer ce module dans l’un des vôtres.

Deuxième approche:

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

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

Vous pouvez maintenant utiliser les composants matériels respectifs dans tous les composants déclarés dansPizzaPartyAppModule

Il convient de mentionner les éléments suivants:

  • Avec la dernière version du matériel, vous devez importer BrowserAnimationsModule dans votre module principal si vous souhaitez que les animations Fonctionnent.
  • Avec la dernière version, les développeurs doivent maintenant ajouter @angular/cdk à leur package.json (dépendance matérielle).
  • Importez les modules de matériel toujours après BrowserModule, comme indiqué par la documentation: 

Quelle que soit l'approche choisie, veillez à importer le matériau angulaire modules après le BrowserModule d’Anngular, car l’importation est importante pour la commande NgModules.

6
Jota.Toledo

Étape 1

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

Étape 2 - Créez un nouveau fichier (/myApp/src/app/material.module.ts) incluant tous les modules de l'interface utilisateur (il n'y a pas de raccourci, vous devez inclure des modules individuels un par un)

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

Étape 3 - Importez et ajoutez ce module nouvellement créé à votre 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 { }
0
sapy