How can I create my own Material module using Angular Material 2?

3
votes

I was checking the latest release of angular/material2 and in the release note they said MaterialModule has been marked as deprecated. here are the words from release note.

MaterialModule

MaterialModule (and MaterialRootModule) have been marked as deprecated. We've found that, with the current state of tree-shaking in the world, that using an aggregate NgModule like MaterialModule leads to tools not being able to eliminate code for components that aren't used.

In order to ensure that users end up with the smallest code size possible, we're deprecating MaterialModule, to be removed in the a subsequent release.

To replace MaterialModule, users can create their own "Material" module within their application (e.g., GmailMaterialModule) that imports only the set of components actually used in the application._

So now MaterialModule is deprecated, i think i should not write it in the imports array of NgModules( please correct me if i am wrong ). Then how do i use <md-card> , md-button and other components. The release note says user can make their own Material module what does that mean.

can anyone show me a demo of how can i create my own material module?

1
angular-material2

1 Answers

3
votes

I found the answer in the future commits to master where they update the docs. https://github.com/angular/material2/compare/2.0.0-beta.3...master

Step 3: Import the component modules

Add MaterialModule as an import in your app's root NgModule.

Import the NgModule for each component you want to use: 

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

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule]
})

So in short, you need to separately specify components in the NgModel which you would like to use instead of one core module. This is done to remove redundant/unused code from the bundle when generating production build.