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 web-animations-js hammerjs

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},
      /* Polyfill for unsupported browsers */
         {src: 'web-animations-js/web-animations.min.js', inject: 'shims'},
      /* For some gestures */
         {src: 'hammerjs/hammer.js', inject: 'libs'},
    ];

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

    const additionalPackages: ExtendPackages[] = [
      {
        name: '@angular/material',
        path: 'node_modules/@angular/material/bundles/material.umd.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/accordion',
        path: 'node_modules/@angular/cdk/bundles/cdk-accordion.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/layout',
        path: 'node_modules/@angular/cdk/bundles/cdk-layout.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/scrolling',
        path: 'node_modules/@angular/cdk/bundles/cdk-scrolling.umd.js'
      },
      {
        name: '@angular/cdk/stepper',
        path: 'node_modules/@angular/cdk/bundles/cdk-stepper.umd.js'
      },
      {
        name: '@angular/cdk/table',
        path: 'node_modules/@angular/cdk/bundles/cdk-table.umd.js'
      },
      {
        name: '@angular/cdk/text-field',
        path: 'node_modules/@angular/cdk/bundles/cdk-text-field.umd.js'
      },
      {
        name: '@angular/cdk/tree',
        path: 'node_modules/@angular/cdk/bundles/cdk-tree.umd.js'
      }
    ];

    this.addPackagesBundles(additionalPackages);

Example usage of a Material Component

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