How to import Angular Material into a project?

Question

I installed Angular Material Design. Now I am trying to add this to the app.module.ts file:

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

What should I define in the section: import imports: [] ? to load all material objects.

I tried: imports: ['MaterialModule'] but it is deprecated

Answer 1

MaterialModule is deprecated in version 2.0.0-beta.3 and has been completely removed in version 2.0.0-beta.11. See this CHANGELOG for more details. Please go through the latest changes.

Breaking changes

• Angular Material now requires Angular 4.4.3 or higher
• MaterialModule has been removed.
• For beta .11, we decided to completely abandon the "md" prefix and use "mat" to move forward.

Please go through CHANGELOG, we will get more answers!

An example is shown below cmd

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

Create a file (material.module.ts) in the "app" folder

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

import to app.module.ts

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

Your component html file

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

Add global CSS 'style.css'

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

Your CSS component

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

If someone didn’t get the output, use the instruction below

Instead of the above interface (material.module.ts), you can directly use the code below in app.module.ts as well.

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

So in this case you do not want to import

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

in app.module.ts

Answer 2

If you want to import all Material Modules, create your own module, i.e. material.module.ts , and do something like the following:

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

Then import the module into your app.module.ts

Answer 3

MaterialModule deprecated in beta so that developers can import into their applications only what they intend to use, and thus improve package size.

Developers now have 2 options:

• Create a custom MyMaterialModule which imports / exports the components necessary for your application, and can be imported by other (functional) modules in your application.
• Import directly the individual material modules that are required for it.

Take the following as an example (extracted from the material page )

First approach:

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

Then you can import this module into any of yours.

Second approach:

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

Now you can use the appropriate material components in all components declared in PizzaPartyAppModule

The following are worth mentioning:

• In the latest version of the material, you need to import the BrowserAnimationsModule into your main module if you want the animations to work
• With the latest version, developers should now add @angular/cdk to their package.json (material dependency)
• Import material modules always after the BrowserModule , as indicated in the documentation:

Whatever approach you use, be sure to import the Angular Material modules after the Angular BrowserModule, since the import order matters to NgModules.

Answer 4

Step 1

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

Step 2 - Create a new file (/myApp/src/app/material.module.ts), which includes all modules of the user interface of the material (there is no shortcut, you must include individual modules one at a time)

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

Step 3 - Import and add this newly created module to your 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 5

Click here to see a screenshot of the error message.

If you people get this error 'compiler.js: 2430 Uncaught Error: unexpected' MatIcon 'directive imported by the' AppModule 'module. Please add the @NgModule' annotation

Please do not import MatIcon from @ angular / material.

Just import below: import {MatIconModule} from '@ angular / material';

---

How to import corner material?

You can run below command. ng add @ corner / material