I have installed Angular Material Design. Now I try to add this in app.module.ts
file:
import { MaterialModule } from '@angular/material';
What I should decify in section: imports: []
? that to load all material entities.
I tried: imports: ['MaterialModule']
but it is deprecated
This question is related to
angular
angular-material
UPDATE for Angular 9.0.1
Since this version there is no barrel file for massive exports in the root index.d.ts. The assets imports should be:
import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
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 {}
source: @angular/material/index.d.ts' is not a module
MaterialModule was depreciated in version 2.0.0-beta.3 and it has been removed completely in version 2.0.0-beta.11. See this CHANGELOG for more details. Please go through the breaking changes.
Breaking changes
Please go through CHANGELOG we will get more answer!
Example shown below cmd
npm install --save @angular/material @angular/animations @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds
Create file (material.module.ts) inside 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 on 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 component 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;
}
If any one didn't get output use below instruction
instead of above interface (material.module.ts) u can directly use below code also in the 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';
So this case u don't want to import
import { MaterialModule } from './material.module';
in the app.module.ts
Import all Angular Material modules in Angular 9.
Create material.module.ts file in your_project/src/app/ directory and paste this code.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
@NgModule( {
imports: [
CommonModule,
BrowserAnimationsModule,
MatCheckboxModule,
MatCheckboxModule,
MatButtonModule,
MatInputModule,
MatAutocompleteModule,
MatDatepickerModule,
MatFormFieldModule,
MatRadioModule,
MatSelectModule,
MatSliderModule,
MatSlideToggleModule,
MatMenuModule,
MatSidenavModule,
MatBadgeModule,
MatToolbarModule,
MatListModule,
MatGridListModule,
MatCardModule,
MatStepperModule,
MatTabsModule,
MatExpansionModule,
MatButtonToggleModule,
MatChipsModule,
MatIconModule,
MatProgressSpinnerModule,
MatProgressBarModule,
MatDialogModule,
MatTooltipModule,
MatSnackBarModule,
MatTableModule,
MatSortModule,
MatPaginatorModule
],
exports: [
MatButtonModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatBadgeModule,
MatListModule,
MatGridListModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatRadioModule,
MatDatepickerModule,
MatChipsModule,
MatTooltipModule,
MatTableModule,
MatPaginatorModule
],
providers: [
MatDatepickerModule,
]
} )
export class AngularMaterialModule { }
Click here to see Error message screenshot
If you people are getting this error "compiler.js:2430 Uncaught Error: Unexpected directive 'MatIcon' imported by the module 'AppModule'. Please add a @NgModule annotation"
Please do not import MatIcon from @angular/material.
Just Import below: import { MatIconModule } from '@angular/material';
How to import Angular Material?
You can run below command. ng add @angular/material
Step 1
yarn add @angular/material @angular/cdk @angular/animations
Step 2 - Create a new file( /myApp/src/app/material.module.ts ) that includes all the material UI modules (there is no shortcut, you have to include individual modules one by one)
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 that 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 { }
You should consider using a SharedModule for the essential material components of your app, and then import every single module you need to use into your feature modules. I wrote an article on medium explaining how to import Angular material, check it out:
https://medium.com/@benmohamehdi/how-to-import-angular-material-angular-best-practices-80d3023118de
I am using Angular CLI 9.1.4 and all i did was just run:
ng add @angular/material
And all the angular material packages were installed and my package.json file was updated.
This is the easiest way to get that done.
Starting from Angular version 9:
Breaking changes:
Components can no longer be imported through "@angular/material". Use the individual secondary entry-points, such as @angular/material/button.
This means that:
import { MatInputModule, MatCardModule } from "@angular/material";
becomes:
import { MatInputModule } from "@angular/material/input";
import { MatCardModule } from "@angular/material/card";
Install & Add Material to Angular Projects
There is an automatic/easy way of adding Material to Angular Projects. Use the Angular CLI's install schematic to set up your Angular Material project by running the following command:
ng add @angular/material
The ng add command will additionally perform the following configurations:
You're done! Angular Material is now configured to be used in your application.
Read more about this here
The MaterialModule
was deprecated in the beta3 version with the goal that developers should only import into their applications what they are going to use and thus improve the bundle size.
The developers have now 2 options:
MyMaterialModule
which imports/exports the components that your application requires and can be imported by other (feature) modules in your application.Take the following as example (extracted from 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 respective material components in all the components declared in PizzaPartyAppModule
It is worth mentioning the following:
BrowserAnimationsModule
into your main module if you want the
animations to work@angular/cdk
to their package.json
(material dependency)BrowserModule
, as stated by the docs: Whichever approach you use, be sure to import the Angular Material modules after Angular's BrowserModule, as the import order matters for NgModules.
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';_x000D_
import * as MATERIAL_MODULES from '@angular/material';_x000D_
_x000D_
export function mapMaterialModules() {_x000D_
return Object.keys(MATERIAL_MODULES).filter((k) => {_x000D_
let asset = MATERIAL_MODULES[k];_x000D_
return typeof asset == 'function'_x000D_
&& asset.name.startsWith('Mat')_x000D_
&& asset.name.includes('Module');_x000D_
}).map((k) => MATERIAL_MODULES[k]);_x000D_
}_x000D_
const modules = mapMaterialModules();_x000D_
_x000D_
@NgModule({_x000D_
imports: modules,_x000D_
exports: modules_x000D_
})_x000D_
export class MaterialModule { }
_x000D_
Then import the module into your app.module.ts
Source: Stackoverflow.com