mseemann/angular2-mdl

Angular 2 - 14 components, directives and styles based on material design lite (npm: @angular-mdl/core)

https://medium.com/@mseemann.io

angular2-mdl's Issues

make mdl tooltips available

make mdl loading available

• progressbar
• spinner

make mdl snackbar available

Pattern on Text Input invalidating Reactive Forms

I am seeing that if I use reactive forms and build a FormGroup with validators on fields it works fine on its own. Then when i add pattern and error-msg to a textField (that matches the FormGroup validators), the FormGroup is ALWAYS invalid. Any ideas on this?

Even if i dont have a pattern validator on the FormGroup it still happens.

Side note, the URL in the readme isnt updated to http://mseemann.io/angular2-mdl/ yet :)

make mdl-shadow available

make mdl layouts available

mdl-table-selectable

Hi, when i'm using mdl-table-selectable it gives

EXCEPTION: Error in http://localhost:4200/vendor/angular2-mdl/dist/components/table/mdl-table.component.js class MdlSelectableTableComponent - inline template:5:42

browser_adapter.ts:82 ORIGINAL EXCEPTION: No value accessor for ''

any idea?

improve id handling for input fields with label

set a default id and use this id for the input element id-attribute and the label for-attribute

make mdl lists available

Basic project structure (github with travis ci builds)

Date picker and dropdown

Hi,

I did not find any date-picker and drop-down in angular2-mdl.

Can anybody suggest where can I get these 2 component with Angular2 and material design.

Thanks
Ananda

make mdl text fields available

make mdl-button available

Refacture mdl-button as component

Add Theme-selection to the demo app

make mdl menu available

ripple effect isn't working in firefox

make mdl sliders available

make mdl toggles available

• checkbox
• radio
• icon toggle
• switch

some question for mdl-icon

Hi,The project is very awesome.
When i use button,look like they have a diffrerent for getmdl;
When repeatedly the button,angular2-mdl will select that icon,but getmdl is not;
angular2-mdl will show a blue selected area,like text seleted.

If change

mdl-button to button

the show style is same.So i think this is a style issue.
Demo url with http://mseemann.de/angular2-mdl/button
https://getmdl.io/components/index.html#buttons-section

make mdl-badge available

make mdl tables available

make mdl dialogs available

MdlTabsComponent - set selected tab programmatically

Thank you for your great work. I am using MDL with angular2 for some time but not with such a component abstraction (was not aware of this library until recently)

So, I am trying it out, and first the tabs component....

When I set the selectIndex property programmatically nothing happens.

Would be really good to be able to switch the selected tab.

What do you think?

And one more. I use the tab panels also with icons (instead of title). And more customizations.. (title with icons - and icons are dynamically show or hidden)
So a great improvement would be a construct like:

<mdl-tab-panel>
   <mdl-tab-panel-title>Do whatever you want</mdl-tab-panel-title>
</mdl-tab-panel>

make mdl-icon available

mdl-textfield and input attributes / events

mdl-textfield does not support the autofocus attribute.

It also doesn't look like the focus/blur events are available to catch.
Eg.

<mdl-textfield (blur)="doStuff()">

provide a themeable scss system

Ms Edge e2e tests should work now

see: angular/protractor#3016
upgrade to protractor 4.x

Add MDL Dialog

Error on project setup

Hi,
I have created a new project using Angular2-mdl with gulp.

I got the following error while adding

import { MDL_DIRECTIVES } from 'angular2-mdl'; @Component{ directives: [ MDL_DIRECTIVES ] }

zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'mdl-ripple' since it isn't a known native property (" (click)="mdlLayout.tabSelected(tab)" class="mdl-layout__tab" [ERROR ->][mdl-ripple]="isRipple" [ngClass]="{'is-active': tab.isActive}">{{tab.title}}</a> "): MdlLayoutHeaderComponent@7:16 ; Zone: angular ; Task: Promise.then ; Value: BaseException$1consoleError @ zone.js:461

If I didn't add this then only text is visible in demo app.

Please help me on this.

It will be great if you create a seed project using angular2-mdl

Thanks,
Ananda

setup code coverage for unit tests

Build 1.4.3 contains console.log statements

Plans / intentions of angular2-mdl

The first impression of angular2-mdl is really good and it looks "professional".

But I am curious what the intention of angular2-mdl is...
e.g.

• Is the library used in production applications?
• Do you plan to support it for a longer time (e.g. support for an upcoming mdl 2.x)?
• Do you want to involve contributors?
• Or is it rather a proof of concept?

TIA

svg images missing in the included scss files

• checkbox: check mark and mask
• progress: buffer mask

celebrate version 1.0!

mdl-textfield and forms

Hi!

Is mdl-textfield compatible with angular/forms?
Is there a way to pass name and id attributes to the input element?

These code:

<form (ngSubmit)="generate(reportForm.value)">

<mdl-textfield type="text"
    label="IDs"
    [(ngModel)]="reportParams.userIds"
    floating-label
    ngControl="userIds"
    name="userIds"
    required
></mdl-textfield>


</form>

produces error:

vendor.js:43701 EXCEPTION: Error: Uncaught (in promise): No value accessor for form control with name: 'userIds'

Maybe, I'm doing something wrong.
npm: Angular2 rc5, angular/forms 0.3.0, angular2-mdl 1.3.0.

mdl-slider did not work on touch devices

did not work on touch devices

Radio Buttons and Drop Down

Hey Mseemann,

I will be testing out the new features tonight for the validity checking but i had one other thing i ran into:

When using radio buttons with a reactive group the radio button view never updates. What i mean is that when you select a radio button, the selection in the group is updated, but ALL of the radio buttons selected stay colored.

      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="1" mdl-ripple>1</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="2" mdl-ripple>2</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="3" mdl-ripple>3</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="4" mdl-ripple>4</mdl-radio>
      <mdl-radio name="group1" formControlName="value" [formGroup]="formGroup1" value="5" mdl-ripple>5</mdl-radio>

This is similar to the code i was using. Also i was on chrome and have not tested on other browsers yet. Any tips or does this look like a bug? (Maybe not redrawing the elements or something?)

Choose a License

Code without an explicit license is protected by copyright and is by default All Rights Reserved.

• http://stackoverflow.com/a/13669816/1255482

Perhaps this was your intention, however it would be helpful to state as much explicitly.

http://choosealicense.com has good explanations of various licenses.

make mdl cards available

internalize all template files

avoid using templateUrl or stylesUrl

Add sidenav or how to add second layout on right

very nice project, I think really choose it to my next project.

It will be fine to add

• sidenav feature (like https://material.angularjs.org/latest/demo/sidenav)
• tree view or folder view
• dialog

I think if you add milestone...what will be furthur developement, what do you plan to add and when? what's in your shortlist ... maybe something like this will avoid issue like mine.

Chrome Autofill Not Showing on TextFields

Currently i am seeing that i cannot get chromes autofill to work on any of the text inputs from angular2-mdl. If you use standard MDL CSS you can normally double click a field with name and id (say username) and it will drop down a list of previously entered values.

I havent looked into the code enough to know why this would be happening, but have you noticed this as well? Has anyone seen similar issues on other browsers?

Thanks!

mdl-textfield required attribute

Hi,

Is there a way to add a 'required' attribute to the mdl-textfield similar to the disabled attribute?

setup e2e tests

Update readme to rc5 and webpack support?

Looks like latest version in master is Angular RC5, but readme indicates otherwise. Is RC5 supported?

Also, documentation is for systemJS. Is webpack supported?

CSS files are not autoprefixed (main.scss)

Possible workaround avoiding a complete redesign of the build process: https://github.com/postcss/postcss-cli

404 - http://mseemann.io/angular2-mdl

I get a 404 when accessing http://mseemann.io/angular2-mdl. Is this still the correct link?

mdl-menu - did not close on touch outside the menu

on touch devices the menu did not close if one touches anywhere on the document.

Hamburger Icon misaligned in mdl 1.2.0

track the ticket: google/material-design-lite#4673
and remove the workaround if this is fixed.