Integration with AngularMaterial2

Quick guide to integrating Angular Material

An example can be found here.

1. Add the NPM packages.

npm install --save @angular/material @angular/cdk

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/prebuilt-themes/indigo-pink.css', inject: true}
    ];

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

    let additionalPackages: ExtendPackages[] = [
      {
        name:'@angular/material',
        path:'node_modules/@angular/material/bundles/material.umd.js',
        packageMeta:{
          defaultExtension: 'js'
        }
      },
      {
        name: '@angular/cdk',
        path: 'node_modules/@angular/cdk/bundles/cdk.umd.js'
      },
      {
        name: '@angular/cdk/a11y',
        path: 'node_modules/@angular/cdk/bundles/cdk-a11y.umd.js'
      },
      {
        name: '@angular/cdk/stepper',
        path: 'node_modules/@angular/cdk/bundles/cdk-stepper.umd.js'
      },
      {
        name: '@angular/cdk/bidi',
        path: 'node_modules/@angular/cdk/bundles/cdk-bidi.umd.js'
      },
      {
        name: '@angular/cdk/coercion',
        path: 'node_modules/@angular/cdk/bundles/cdk-coercion.umd.js'
      },
      {
        name: '@angular/cdk/collections',
        path: 'node_modules/@angular/cdk/bundles/cdk-collections.umd.js'
      },
      {
        name: '@angular/cdk/keycodes',
        path: 'node_modules/@angular/cdk/bundles/cdk-keycodes.umd.js'
      },
      {
        name: '@angular/cdk/observers',
        path: 'node_modules/@angular/cdk/bundles/cdk-observers.umd.js'
      },
      {
        name: '@angular/cdk/overlay',
        path: 'node_modules/@angular/cdk/bundles/cdk-overlay.umd.js'
      },
      {
        name: '@angular/cdk/platform',
        path: 'node_modules/@angular/cdk/bundles/cdk-platform.umd.js'
      },
      {
        name: '@angular/cdk/portal',
        path: 'node_modules/@angular/cdk/bundles/cdk-portal.umd.js'
      },
      {
        name: '@angular/cdk/rxjs',
        path: 'node_modules/@angular/cdk/bundles/cdk-rxjs.umd.js'
      },
      {
        name: '@angular/cdk/scrolling',
        path: 'node_modules/@angular/cdk/bundles/cdk-scrolling.umd.js'
      },
      {
        name: '@angular/cdk/table',
        path: 'node_modules/@angular/cdk/bundles/cdk-table.umd.js'
      }
    ];

    this.addPackagesBundles(additionalPackages);

Example usage of a Material Component

• Add import { MatToolbarModule } from '@angular/material'; in about.module.ts
• Add MdToolbarModule to NgModule imports in about.module.ts
• Add HTML element: <md-toolbar color="primary">My App</md-toolbar> in about.html
• Fix tests: add MaterialModule to imports of TestBed.configureTestingModule in about.component.spec.ts