mseemann/angular2-mdl

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

Angular 15 components, directives and styles based on material design lite https://getmdl.io (v: 1.3.0). This package assumes that you are building an Angular app with TypeScript. Angular CLI makes it even easier but isn't required.

• Please don't use github to ask questions. Use stackoverflow instead: http://stackoverflow.com/questions/tagged/angular-mdl.
• plnkr if you'd like to play around http://plnkr.co/edit/f73PKEmzpAcchza8Q9rb?p=preview
• Demo-App with all supported components and documentation
• Porting of the MDL-Dashboard provided by AndreaM16: Demo-App , Sources.

Status of the npm package version 15 (mdl version 1.3.0; angular 14)

• Badges
• Buttons
• Cards
• Chips
• Dialogs (imperative and declarative)
• Icons
• Loading
• Shadow
• Toggle (Checkbox, Radio, Icon Toggle, Switch)
• Lists
• Slider
• Snackbar
• Table
• Tooltips
• Menu
• Layout (standard, scroll, waterfall, tabs)
• Tabs
• Textfields (multiline, expandable)

Installation

npm install @angular-mdl/core --save

css from material-design-lite

You may include the material-design-lite css in your html and you're done!

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Under http://mseemann.io/angular2-mdl/theme you'll find a customizing tool to change the theme colors.

How to use the scss files from material-design-lite

This package includes the scss files from material-design-lite. With these files you are able to change the colors and other variables in your own scss files:

@import "~@angular-mdl/core/scss/color-definitions";

$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;
$color-accent: $palette-amber-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;

@import "~@angular-mdl/core/scss/material-design-lite";

To make this working you need to find out the way how you could tell your build system where the scss is located. For example with webpack you can use the special ~@angular-mdl/core syntax used above. Or you can configure the includePaths:

sassLoader: {
  includePaths: [util.root('node_modules', '@angular-mdl/core', 'scss')]
}

@angular-mdl/*

Additional components for @angular-mdl/core that are not part of material design lite

• current angular version: 15
• current angular-mdl version: 15

The components

Name	Provided By	Description	npm	documentation	status	demo
datepicker	mseemann	a simple date picker		readme	experimental	demo
expansion-panel	abdulqadir93	organise arbitrary content in an expansion panel		readme	experimental	demo
fab-menu	leojpod	a fab menu component		readme	experimental	demo
popover	tb	popover with arbitrary content		readme	experimental	demo
select	tb	a select box		readme	experimental	demo

These components support AOT and TreeShaking!

How to use the components

Install the components via npm. Please check out the individual readme for each component from the table above.

Starting with version 0.2.0 the components each have no css styles imported by default. You need to setup your build pipeline to include the scss files from each component you want to use. This makes it possible to configure the theming for the components you want to use.

If you are using webpack you may use the special webpack import syntax for node_modules:

@import '~@angular-mdl/core/scss/color-definitions';

$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;
$color-accent: $palette-amber-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;

@import '~@angular-mdl/core/src/scss-mdl/material-design-lite';

@import '~@angular-mdl/popover/popover';
@import '~@angular-mdl/select/select';

Another way is to include each component folder in the search path for your scss preprocessor. An example for webpack:

sassLoader: {
	includePaths: [
		'node_modules/@angular-mdl/popover',
		'node_modules/@angular-mdl/select'
	]
}

Development

• npm start - local dev server
• npm build - build a production release
• npm test - run the unit tests

The coverage report is stored under: coverage/coverage-remap/index.html

Contributing

Every contribution is welcome. Please checkout the CONTRIBUTION.md file.

Remarks

And if you would like to see a real world app that uses this package have a look at https://www.yovelino.de/apps/tour-planner/.

License

angular2-mdl's Issues

Refacture mdl-button as component

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

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

make mdl menu available

mdl-textfield required attribute

Hi,

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

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!

Basic project structure (github with travis ci builds)

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

CSS files are not autoprefixed (main.scss)

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

make mdl layouts 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>

Ms Edge e2e tests should work now

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

make mdl-badge available

make mdl-icon available

ripple effect isn't working in firefox

setup code coverage for unit tests

Add Theme-selection to the demo app

make mdl tables available

celebrate version 1.0!

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.

make mdl dialogs available

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?)

make mdl text fields available

setup e2e tests

internalize all template files

avoid using templateUrl or stylesUrl

Build 1.4.3 contains console.log statements

make mdl loading available

• progressbar
• spinner

make mdl tooltips available

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

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

Hamburger Icon misaligned in mdl 1.2.0

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

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?

svg images missing in the included scss files

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

provide a themeable scss system

make mdl-button available

make mdl cards 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()">

make mdl-shadow available

mdl-slider did not work on touch devices

did not work on touch devices

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.

make mdl sliders available

make mdl lists 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 snackbar available

Add MDL Dialog

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

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.

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.

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

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?