Material Design Lite (MDL) VS Angular2 Material in Angular2 app

Question

There are a few Angular2 tutorials on YouTube and other learning sites, some of which have used Material Design Lite (MDL) and some have used the new Angular2 Material for demonstration purposes.

Considering that Angular2 Material is still pretty new (currently in Alpha) and limited in the number of components and documentation as compared to MDL, which would be a better option to implement in Angular2 at this point of time and what are the pros and cons of each specific to Angular2 ?

Answer 1

MDL is definitely the one that's better documented (I haven't found any good documentation on Angular2 Material). I think that because of this, MDL is (currently) the better choice. The negative of MDL is that it isn't integrated in typescript/angular2.

If you're going to be using MDL components in your Angular 2 component templates, you can extend your component from something like this, to have the MDL components registered: (otherwise MDLs animations will not work, as they depend on the javascript)

declare var componentHandler: any;
export class MaterialTemplate {
    ngAfterViewInit(){
        componentHandler.upgradeAllRegistered();
    }
}

Usage would be something like this:

@Component({
    selector: 'my-selector',
    template: `
        <form action="#">
        <div class="mdl-textfield mdl-js-textfield">
        <input value="{{bleh}}" class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">Text...</label>
        </div>
        <button (click)="action()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
        create
        </button>
        </form>`
})
export class CreateComponent extends MaterialTemplate {...}

Once Angular2 Material is out of alpha and has some documentation, I'd switch to that though.