Overview
Angular Material Design Lite is an angular wrapper on top of Material Design Lite.It provides directives for most (work in progress) Material Design Components.
Using Bower
bower install angular-material-design-liteThen require the mdl module:
angular.module('your-app', ['mdl']);
Config
Floating text labels and ripple effect are enabled by default.Here's how you can disable them:
angular.module('your-app').config(function(mdlConfigProvider){ mdlConfigProvider.floating = false; mdlConfigProvider.rippleEffect = false; });
Text Field
<input type="text" placeholder="First Name" ng-model="first_name" mdl-text-field/>
Checkbox
<mdl-checkbox label="Urgent package" ng-model="is_urgent"></mdl-checkbox>
Radio
<mdl-radio label="Male" value="male" ng-model="gender"></mdl-radio>
<mdl-radio label="Female" value="female" ng-model="gender"></mdl-radio>
Switch
<mdl-switch label="Notifications" ng-model="show_notifications"></mdl-switch>
Buttons
<mdl-button>Flat button</mdl-button>
<mdl-button theme="primary">Primary Flat button</mdl-button>
<mdl-button theme="accent">Accept Flat button</mdl-button>
<mdl-button-raised>Raised button</mdl-button-raised>
<mdl-button-raised theme="primary">Primary Raised button</mdl-button-raised>
<mdl-button-raised theme="accent">Accent Raised button</mdl-button-raised>
<input type="text" mdl-text-field placeholder="Dynamic Progress bar" ng-model="progress"/>
<input type="text" mdl-text-field progress="{{progress}}"/>
<mdl-progress progress="20"></mdl-progress>
<text-area placeholder="Label here" mdl-text-field></textarea>
<mdl-spinner></mdl-spinner>
<mdl-spinner single-color="true"></mdl-spinner>
Layouts
<mdl-navigation-layout class="class list" mdl-header-title="'Header Title'" mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]" mdl-menu-title="'Menu Title'" mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]" mdl-header-transparent="true"> </mdl-layout>
<mdl-navigation-layout class="class list" mdl-header-title="'Header Title'" mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]" mdl-menu-title="'Menu Title'" mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]" mdl-fixed-drawer="true" mdl-header-hidden="true"> </mdl-layout>
<mdl-navigation-layout class="class list" mdl-header-title="'Header Title'" mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]" mdl-menu-title="'Menu Title'" mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]" mdl-fixed-header="true"> </mdl-layout>
<mdl-navigation-layout class="class list" mdl-header-title="'Header Title'" mdl-header-items="[{'text':'Lorem',href:'#/lorem'}, {'text':'Ipsum',href:'#/ipsum'}]" mdl-menu-title="'Menu Title'" mdl-menu-items="[{'text':'Item 1',href:'#/a'}, {'text':'Item 2',href:'#/b'}]" mdl-fixed-drawer="true" mdl-fixed-header="true"> </mdl-layout>
Upgrading Components
MDL Components inside ng-if or dynamic templates needs to be manually upgraded as per the [MDL docs](http://www.getmdl.io/started/index.html#dynamic)You can use the mdl-upgrade attribute directive on elements that needs to be manually upgraded.
Check the example for more information.
<mdl-button-raised mdl-upgrade ng-if="!!show">Component upgraded</mdl-button-raised>