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'
      },
      {
        name: '@angular/material/core',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/toolbar',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/table',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/button',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/button-toggle',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/card',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/checkbox',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/sort',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/dialog',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/icon',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/snack-bar',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/expansion',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/grid-list',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/slider',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/tabs',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/form-field',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/list',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/menu',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/slide-toggle',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/tooltip',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/sidenav',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/progress-bar',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/progress-spinner',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/radio',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/select',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/stepper',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/datepicker',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/chips',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/autocomplete',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/paginator',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/material/input',
        path: 'node_modules/@angular/material/bundles/material.umd.js'
      },
      {
        name: '@angular/cdk',
        path: 'node_modules/@angular/cdk/bundles/cdk.umd.js'
      },
      {
        name: '@angular/cdk/accordion',
        path: 'node_modules/@angular/cdk/bundles/cdk-accordion.umd.js'
      },
      {
        name: '@angular/cdk/layout',
        path: 'node_modules/@angular/cdk/bundles/cdk-layout.umd.js'
      },
      {
        name: '@angular/cdk/stepper',
        path: 'node_modules/@angular/cdk/bundles/cdk-stepper.umd.js'
      },
      {
        name: '@angular/cdk/a11y',
        path: 'node_modules/@angular/cdk/bundles/cdk-a11y.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