Skip to content

Integration with AngularMaterial2

Amal Shehu edited this page Nov 22, 2016 · 23 revisions

1. Add the NPM packages.

npm install --save @angular/material

2. Add pre-built material theme to be injected/bundled in project.config.ts.

    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      /* Select a pre-built Material theme */
         {src: '@angular/material/core/theming/prebuilt/indigo-pink.css', inject: true}
    ];

3. Add Material configuration to SystemJS in project.config.ts.

   this.addPackageBundles({
     name:'@angular/material',
     path:'node_modules/@angular/material/material.umd.js',
     packageMeta:{
       main: 'index.js',
       defaultExtension: 'js'
     }
   });

4. Import the Angular Material NgModule.

import { MaterialModule } from '@angular/material';
// other imports 
@NgModule({
  imports: [ MaterialModule.forRoot() ],
  ...
})
export class FooAppModule { }