4

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 ?

Neville Katila
  • 329
  • 5
  • 20

3 Answers3

4

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.

Georg Grab
  • 2,271
  • 1
  • 18
  • 28
0

Its totally on your use case. Will your project be going into production soon, or is there quite some time for it ? Do you require Customizing the UI Components down to every detail or is it very general purpose ? Ive been researching a lot and since we have a short time to go into production i choose Bootstrap Material Design URL : mdbootstrap.com Reason : If u use angular material Components, well first off they are in alpha second , my use case is very customized, example would be i am calling rest services to populate even basics like radio,checkboxes.

Point being, if you are short on time require heavy customization go with MDL (Even the popular Wijmo 5 ng2 components are using it now) or you could wait and opt for angular2 material.

Pratik Kelwalkar
  • 1,592
  • 2
  • 15
  • 21
0

Apart from Angular2-material and MDL, there is also MaterializeCSS which is a CSS Framework based on material design. Their official web site is located at http://materializecss.com

They have much more working components than provided by MDL or Angular2-material, all with examples and documentation.

However, MaterializeCSS is JQuery based, i.e. it needs JQuery to activate the dynamic behaviour of some components. Have a look at https://www.npmjs.com/package/angular2-materialize. This package adds exactly this dynamic behaviour to Angular2 apps. Just Import the MaterializeDirective in your Angular2 component and it should work.

Cerny
  • 305
  • 1
  • 4