Working with Material Design Lite

The ng2-webpack Demo project includes a simple CRUD application that uses MDL

Steps:

• import 'material-design-lite/material.js'; // src/vendor.ts
• or just the desired components

import 'material-design-lite/src/mdlComponentHandler.js';
import 'material-design-lite/src/button/button';
import 'material-design-lite/src/layout/layout';
import 'material-design-lite/src/ripple/ripple';
import 'material-design-lite/src/textfield/textfield';

• in src/style/app.scss, import the desired components:

/* Material Design Lite */

// Variables and mixins
@import "variables";
@import "mixins";

// Resets and dependencies
@import "resets/resets";
@import "typography/typography";

// Components
@import "palette/palette";

// etc.

• Simplify sass imports by setting include paths in webpack.config.js

    config.sassLoader = {
        includePaths: [path.resolve(__dirname, "./node_modules/material-design-lite/src")]
    };

• Add Material Design classes to your templates

    <div class="mdl-card__actions">
        <button type="submit" (click)="cancelled.emit(selectedItem)"
                class="mdl-button mdl-js-button mdl-js-ripple-effect">Cancel</button>
        <button type="submit" (click)="saved.emit(selectedItem)"
                class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">Save</button>
    </div>

Issues

Issue - MDL augmented DOM effects are not applied:

• consistently during state changes
• during route changes

Solution:

    ngAfterViewInit() {
        // Ensure material-design-lite effects are applied
        componentHandler.upgradeDom();
    }

screenshot of demo: