Welcome to the e2e demos for Angular Material Design Lite!

Checkout the GitHub project on how to install and use the angular-mdl package.
News:

This package contains only components that are provided by material design lite.
But there are lot of possible components that will be needed too!
To keep this package clean and small the package angular2-mdl-ext is under development to match these needs.

Features:
  • Angular components for Material Design Lite
  • Suports Angular 2 (angular2-mdl) and Angular 4 and up (@angular-mdl/core)
    • change the properties and the components changes their behavior
    • add and remove components on the fly (for example menu items)
  • Components instead of css classes.
    • This will provide less errors and a better tool support.
    • The html code is shorter.
  • Include only the code that you really use in your production files.
  • For sure this demo and docu has been created with angular2-mdl!
  • Ready for Angular Reactive Forms.
NPM Packages

Use the npm packages @angular-mdl/core for Angular 4 and up and angular2-mdl for Angular 2.

A side effect is that you don’t need to write a lot of css classes and html structures to create material design lite components. Instead of
  
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
	<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
		<i class="material-icons">search</i>
	</label>
	<div class="mdl-textfield__expandable-holder">
		<input class="mdl-textfield__input" id="sample6" type="text">
	</div>
</div>
  
you just write:
	
<mdl-textfield [(ngModel)]="theText" icon="search" type="text"></mdl-textfield>
	

to create an expandle text field and get two-way-databindig for free!

Still not convinced? With this package you can mix original material design lite features and angular web apps within one website. yovelino.de uses material deisgn lite for the content related pages and angular-mdl for the tour planner. But the user will not notice this because both parts look and behave the same.