jadjoubran / angular-material-design-lite

A tiny Angular wrapper for Material Design Lite

angular-material-design-lite

Version 0.3.0

Angular wrapper for Material Design Lite.

View Documentation & Demo

Installation

bower install angular-material-design-lite --save

or using npm

npm install angular-material-design-lite --save

Supported Directives

Check Documentation

Configuration options

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;
});

Upgrading components in dynamic templates

You can use the mdl-upgrade attribute directive on elements that are inside ng-if or dynamically injected templates. Check issue #4 for more information.

Questions, Issues and Feature Requests

Open a new issue.

What's next?

Here's what I'm planning for the next releases

• prism.js for docs
• add tooltip support
• add tabs support
• support indeterminate progress bar
• move additional attributes from directive to element
• abstract ngClass conditions into service
• split components across multiple files
• automate releases using gulp

angular-material-design-lite's Issues

Switch not responding to model change

Frist, so happy to see this being developed - thanks. With the progress bar, you are watching the progress and updating the control accordingly. With the switch, this doesn't seem to be the case. With angular material design, an update to the model causes the switch ui to refresh. Do you have plans to provide this?

Angular 2.0 support ?

Hi.,

Does this have any Angular 2.0 version ?

[REQUEST] MDL Tooltips

When will be available?

how do i let it work in template.html when i use the ngRute

when i write a template page
and i use the ngRute

the ui is worked but the input event not working

Layout Drawer question

Hello, great job and thanks for it. I have a questions, angular-material-design-lite suport mdl-layout__drawer? ho ca I use it?.

Thanks.

any progress soon?

Hi, I appreciated this work, but currently the directives are 7, Any plan to extend the support soon?

Angular mdl input type issue

How to use input Types in mdl angular with validation errors????

mdl-button-raised to be fusionned with mdl-button

I think it would be better to have an attribute for the "design" to include :
-raised
-fab
-mini-fab
-icon
-colored
-primary
-accent
and why not ripple
Everything could be into a single attribute in which you can put a list
Click me

Npm support?

Hi,

Any chance of porting your module as an npm package?
I'd like to get rid of bower and use only npm for external libraries (mainly because I'm playing with Webpack which is better used with npm modules only).

Thanks!

ui-view button issue

I noticed the compiled button directive looks like this inside ui-view

<mdl-button-raised class="ng-isolate-scope">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ng-class="ngClass" ng-transclude=""><span class="ng-scope">Get Started</span>
    </button>
</mdl-button-raised>

and like this outside it

<mdl-button-raised class="ng-isolate-scope">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" ng-class="ngClass" ng-transclude="" data-upgraded=",MaterialButton,MaterialRipple">
      <span class="ng-scope">Accent Raised button</span><span class="mdl-button__ripple-container">
      <span class="mdl-ripple is-animating" style="width: 394.688px; height: 394.688px; transform: translate(-50%, -50%) translate(67px, 31px);"></span>
      </span>
    </button>
</mdl-button-raised>

The result is inside ui-view the ripple effect doesn't work and the active state of the button ends to looks like this:

Here the plunker
https://plnkr.co/edit/AXfuSyOXlGyM3uK9ELKJ?p=preview

Initial state of checkbox

I am trying to start the
<mdl-switch label="Notifications" ng-model="attendee.name" mdl-upgrade></mdl-switch>

as checked, but it's not working. Is there an issue about that?

ripple effect applied when button is disabled

One thing that might be annoying is that if you disable a button with ng-disabled but the ripple class is applied then it will still apply the ripple effect when the button is pressed even when disabled. My solution was to change the ng-class which applied the ripple effect to include the check for the disable value.

Fix index page bower path

Installation

bower install angular-materail-design-lite
must be
bower install angular-material-design-lite

convert to attribute directives: radio & checkboxes

Check #9 for more info

componentHandler.upgradeAllRegistered() on ngView

Hi
I am facing an issue using MDL with Angularjs in the ngView
For example on Textfields, the ripple.js is launched before the end of the ng-repeat process into the ngView. It is recommended to launch the function componentHandler.upgradeAllRegistered() when all is finished on dynamic websites but can't find anyway for that.
Best way seems to have a directive linked to the "$last" of ngRepeat elements :

.directive('onFinishRender', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      if (scope.$last === true) {
        element.ready(function() {
          componentHandler.upgradeAllRegistered()
        });
      }
    }
  }

Perhaps you can add this directive in all the MDL directives ?

convert to attribute directive: buttons

Check #9 for more info

Mdl tabs "is-active" class is not applied by [ngClass].

I have created two plunker samples.In the first i tried to apply a class by name active and it applied and here is the demo for it-http://plnkr.co/edit/0txN0C14GPl0ljrpsDlr?p=preview
But when i try to apply "is-active" class it is not applying.why is that so? Here is the plunker demo for it-http://plnkr.co/edit/oNRL4Rc6lmjmaLGXX54H?p=preview

mdl-menu ul id="" and for="" Issue in angular

Hi, i'm using mdl-menu in mdl angular with ng-repeat on li. but in ul of mdl-menu for="Id" is also repeat with all li and when i click on one li all li menu open.

What does the package offer over the standard material design lite

I have spent most of the day converting my project from Angular Material over to the new release of material design lite - and it seems to be working very well - in fact a lot better than the Angular design version.

As it seems to be working well, could you explain what benefits using your angular-material-design-lite would bring?

material design ng-view issue

all mdl components work wihtout ng-view but with ng-view did'nt work any component...

please help

typing error in demo

Hi - It's nothing major - but have a look at the label for the radio buttons the demo shows both as being set to "male"

mdl-text-field : keep <input> to conserve the possibility to use some attribut as "list"

With the current directive mdl-text-field there is no possibility to have the "list" attribute for the input or "type".
Best would be that the directive must include the input to be able to do so.
Check Lumx project that gives that possibility for example.

Nav links not working with (responsive) drawer layout

Fore some reason anchors won't work when using a small screen (or scaling the browser window)

<div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Material Design Lite</span>
      <nav class="mdl-navigation">
        <a href="#overview" class="mdl-navigation__link">Overview</a>
        <a href="#types" class="mdl-navigation__link">Custom Types</a>
      </nav>
</div>

Tested on both:

• jadjoubran.github.io/angular-material-design-lite
• angular-formly.com/#/example/integrations/angular-material-lite (formly-js/angular-formly-website#53)