The issue is that when I select an option , the selected value will not update.
<md2-select [(ngModel)]="selectedCategory" placeholder="category">
<option *ngFor="let i of categories" [value]="i">{{i}}

even I use:
<md2-select [(ngModel)]="selectedCategory" (change)="onChange($event)" placeholder="category">
<option *ngFor="let i of categories" [value]="i">{{i}}

onChange(newValue) {
  this.selectedCategory= newValue;
}

I ran the demo on Chrome, Firefox, IE11 and the result is only work on chrome.

Hello, how to add a custom header to accordion?

<header>
  {{content.title}}
  <span class="accordion-time">{{content.created_at | date:'y-MM-dd H:mm'}}</span>
</header>

PrimeNg have it

It would be nice if there is datepicker mode that enables entering a date from keyboard

I want to open datepicker on focus and button click event. so please let me know open and close event of datepicker. same as dialog(Open / close event)

Please help me @dharmeshpipariya @mmrath @leocaseiro @rushi216 @chintans @AsherBarak

Third party libs have to be AoT-ed before they can be integrated in an AoT compiled application. The third party library should publish JS files, .d.ts files and metadata.json files

Getting your Angular 2 library ready for AoT

AoT compile err

For e.g. - an option to disable Sundays from datepicker.

Looks like that property is missing )=

https://github.com/Promact/md2/blob/master/src/lib/select/select.ts

<md2-select id="uniqId" formControlName="selectName" [readonly]="!isAbleToEditForm ? true : null">
    <md2-option value="uniqValue">uniqValue</md2-option>
</md2-select>

I have reported this in the angular-cli GitHub: angular/angular-cli#2954

Tested on http://code.promactinfo.com/md2/multiselect

The demo of Confirm Dialog does not work. Show a dialog, but with not buttons to either confirm or cancel, as I guess it suppose to work.

I don't think there is a way to define a boolean in html template, so if I want to set the multiple property in the accordion, it should accept 'false' or 'true' as string in the template.

Right now it only accepts boolean values, and boolean values only can be passed if they are bound.

<!-- How it is right now -->
<md2-accordion [multiple]="multiple"> <!-- where multiple have to be bound in the component -->
<!-- How should be permited -->
<md2-accordion multiple="false">
<!-- or -->
<md2-accordion multiple="true">

The passed format to the datepicker only is being used when a new date is selected, when it first loads it uses the default format.

    dateFormat = 'MM/DD/YYYY';

Template:

    <md2-datepicker
       [formControlName]="question.key"
       [id]="question.id"
       [type]="question.type"
       [format]="dateFormat"
   ></md2-datepicker>

Tooltip not disappear when appear and change the other view page. Tooltip continue showing in the appear position when leave the view page and not disappear.

When leave the view the tooltip continue showing

Congratulations for md2 project!!!

Your component look great, especially the datepicker. Is custom theming already supported? If no, when can we expect it?

Hi,

Currently, the datepicker always opens to the bottom.

Ideally there would either be:

• An option to control how the datepicker opens (@Input() position) with either top or bottom
• The ability for the datepicker to detect if it is near the edge of the viewport, and open in the opposite direction if it is

I have tried to use autocomplete input in form control for choose city but It does not working. It is working only ngModel. I dont want to use ngModel so What is solutions for that??

@dharmeshpipariya @leocaseiro @chintans @AsherBarak

I am trying to integrate md2 with angular seed .But i'm getting these following errors.
Seed info :https://github.com/mgechev/angular-seed

My project.config.ts file

import { join } from 'path';

import { SeedConfig } from './seed.config';

/**
 * This class extends the basic seed configuration, allowing for project specific overrides. A few examples can be found
 * below.
 */
export class ProjectConfig extends SeedConfig {

  PROJECT_TASKS_DIR = join(process.cwd(), this.TOOLS_DIR, 'tasks', 'project');

  constructor() {
    super();
    //this.APP_TITLE = 'Put name of your app here';


    /* Enable typeless compiler runs (faster) between typed compiler runs. */
    // this.TYPED_COMPILE_INTERVAL = 5;

    // Add `NPM` third-party libraries to be injected/bundled.
    this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
      /* Select a pre-built Material theme */
     {src: '@angular/material/core/theming/prebuilt/indigo-pink.css', inject: true},
      // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
      // {src: 'lodash/lodash.min.js', inject: 'libs'},
    ];

    // Add `local` third-party libraries to be injected/bundled.
    this.APP_ASSETS = [
      ...this.APP_ASSETS,
      // {src: `${this.APP_SRC}/your-path-to-lib/libs/jquery-ui.js`, inject: true, vendor: false}
      // {src: `${this.CSS_SRC}/path-to-lib/test-lib.css`, inject: true, vendor: false},
    ];

    /* Add to or override NPM module configurations: */
    // this.mergeObject(this.PLUGIN_CONFIGS['browser-sync'], { ghostMode: false });
    // add Material configuration to SystemJS.
   this.addPackageBundles({
     name:'@angular/material',
     path:'node_modules/@angular/material/material.umd.js',
     packageMeta:{
       main: 'index.js',
       defaultExtension: 'js'
     }
   });

   // add Material configuration to SystemJS.
  this.addPackageBundles({
    name:'md2',
    path:'node_modules/md2/index.js',
    packageMeta:{
      main: 'md2.umd.js',
      format:'cjs'
    }
  });

  }

}

If you click into an input you need to press TAB 2 times in order to move onto the next inout in the form (instead of the expected once)

When run the meteor app run well, but in the browser the error appear:

Uncaught SyntaxError: Unexpected token import

The error is in this line:

import { ApplicationRef, ComponentFactoryResolver, Injectable, ReflectiveInjector, NgModule } from '@angular/core';

this is the fragment of code when the error appear:

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//                                                                                                                     //
// node_modules/md2/toast/toast.js                                                                                     //
//                                                                                                                     //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                                                                                                       //
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {                               // 1
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;                                                     // 5
};                                                                                                                     // 6
var __metadata = (this && this.__metadata) || function (k, v) {                                                        // 7
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);          // 8
};                                                                                                                     // 9
import { ApplicationRef, ComponentFactoryResolver, Injectable, ReflectiveInjector, NgModule } from '@angular/core';    // 10
import { CommonModule } from '@angular/common';                                                                        // 11
import { Md2ToastComponent } from './toast.component';                                                                 // 12
export var Toast = (function () {                                                                                      // 13
    function Toast(message) {

@dharmeshpipariya first of all thank you for awesome work!

Adding NgModules would be greater, see angular/components#950

Github Pages does not recognize the routes, and the app does not load if the route if different from root. So you should consider using hash to handle the root. Using this will improve user history navigation and page reloading behavior.
use:
RouterModule.forRoot(ROUTES, { useHash: true }),
result:
http://code.promactinfo.com/md2/#/accordion
instead try to go to:
http://code.promactinfo.com/md2/accordion

The hashed url redirects to root, cause it does not know any route with hash, but if it did it would redirect to that route. Instead, the unhashed url throws a 404 error page.

Hey guys I'm getting this error when trying to run it:

index.js:1 Uncaught SyntaxError: Unexpected token export

This is just happening by adding Md2Module.forRoot() in my module.

Using: Angular 2.2.4 with Webpack

Like mentioned in topic, 'touched' state is never set

DateTime Picker UI is in English. Would it be possible to implement internationalization, please?

The drop down for rows per page is not material, could you use your own select template instead?

readonly changed to false already.

When trying to import the library into a project built using beta 15 of the angular cli and webpack I follow the same steps as other libraries and add

import { Md2Module } from 'md2/all';

and add Md2Module.forRoot() to the NgModule imports

in app.module.ts

It builds fine but on running it gives the error

Uncaught Error: Cannot find module "."

This happens even with or without .forRoot and also for importing individual modules such as Md2DatePicker

Can you update the documentation with the correct configuration to get everything running with the angular cli.

Thanks

I had this library working fine using systemjs . I had to move to web pack and I get the following error

webpack: bundle is now VALID
/Users/ar/Programs/angCLI/CashPanda/node_modules/md2/index.js:1
(function (exports, require, module, __filename, __dirname) { export * from './core';
^^^^^^
SyntaxError: Unexpected token export
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/ar/Programs/angCLI/CashPanda/dist/server/server.bundle.js:2212:18)
at webpack_require (/Users/ar/Programs/angCLI/CashPanda/dist/server/server.bundle.js:21:30)

The module definition is

import { Md2Module } from 'md2';
import { MdCardModule } from '@angular/material';

@NgModule({
imports: [
CommonModule, Md2Module.forRoot(), MdCardModule.forRoot()
],
declarations: [FaqsComponent],
exports: [FaqsComponent]
})
export class FaqsModule { }

Everything has been installed with npm install md2 --save

Can you create an example with the Angular 2 CLI?

Thanks in advance for your help.

Safari is not working for time and datetime, only date.

It might be something with the format.
I'll investigate deeply later. But, you can run the demo app and see Nan:

Hello,
Setting min/max date to null or undefined should set them to 1970/+100 years, too.
new Date(null) and new Date(undefined) resolve to true so you don't set default value in getYears() method.
Please check for null or undefined in setters.

https://github.com/Promact/md2/blob/master/src/lib/datepicker/datepicker.ts#L161

Hi, I'd like to request a feature to change year.
I'm using the datepicker component for a date of birth field and it's very hard to my users navigating month by month.

My suggestion is to show a select/autocomplete field on click event into the year field.

Similar this component for angular 1: https://codepen.io/alenaksu/pen/eNzbrZ

Thanks

toast.component.ts

'Inject' is declared but never used.
'Optional' is declared but never used.

I don't know if this is intentional, or not. Just to point it. Also, you might want to use Codelyzer with the proper rules.

md2-accordion-tab is ignoring the hidden property in the html template and it's being showed anyway.

I expect the md2-accordion-tab to be hidden if the property is set to true, and be showed again if the property is set to false.

It is strange that date not in range can be selected if:

1. Select a date (ex. 2016-11-15)
2. Change max input to date before selected (ex. 2016-10-15)
3. Selected date is out of new range

I think expected behaviour should be moving selected date to closest one in range (ex. 2016-10-15)

AOT compilation failed for my app with the following errors.

dist/tmp/node_modules/md2/autocomplete/autocomplete.ngfactory.ts(235,44): error TS2339: Property '_control' does not exist on type 'Md2Autocomplete'.
dist/tmp/node_modules/md2/autocomplete/autocomplete.ngfactory.ts(235,91): error TS2339: Property '_control' does not exist on type 'Md2Autocomplete'.
dist/tmp/node_modules/md2/autocomplete/autocomplete.ngfactory.ts(253,48): error TS2339: Property '_onBlur' does not exist on type 'Md2Autocomplete'.

I guess the following lines are the rootcause
https://github.com/Promact/md2/blob/master/src/lib/autocomplete/autocomplete.ts#L66
https://github.com/Promact/md2/blob/master/src/lib/autocomplete/autocomplete.ts#L69

I tried to use md2datepicker in my application but like other material components md2datepicker is not responsive.
please correct me if i am wrong

How to load items with ajax?

Right now focus on 'Mango'. After press key 'A' I wanted to know second screenshot

I wanted to need same as in angular2 like - AngularJs Demo

Hello! Thanks for the nice component.
But it doesn't have a possibility to clear date.

Steps:

1. select date
2. set model to null or undefined

Actual result: view contains old date
Expected result: datepicker should be empty

PS: select and autocomplete work correctly

Thanks

I am using these two components in my angular 2 app and they seem to work fine in Chrome, FireFox and Safari. However they seem to be broken in IE11. When I click in the component it displays the selectable items but when I click on an item to select it then nothing appears to have been selected. I tried loading your demo site in IE11 and even with that I get the same broken behaviour under IE11.

I am using [email protected] and [email protected]

Update
I have discovered that if I use the keyboard and press enter to select items then that seems to work. So its only mouse selection that seems to have an issue.

Hello,

is there a way to access the input text value of the auto complete control? If not, this would be very convenient to have.

Cheers
Marco

Components are using old value accessor from common, I think it use the value from the forms api

Old:
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/common'

New:
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'

I get following errors when installing md2 with angilar2 rc6:

ERROR in /Users/tb/project/frontend/node_modules/md2/md-dialog/portal/portal.d.ts
(25,16): error TS2314: Generic type 'Type<T>' requires 1 type argument(s).

ERROR in /Users/tb/project/frontend/node_modules/md2/md-dialog/portal/portal.d.ts
(32,28): error TS2314: Generic type 'Type<T>' requires 1 type argument(s).

ERROR in /Users/tb/project/frontend/node_modules/md2/md-dialog/overlay/overlay.d.ts
(1,10): error TS2305: Module '"/Users/tb/project/frontend/node_modules/@angular/core/index"' has no exported member 'ComponentResolver'.

Hello, i love all the extra's this project has to offer and used several plugins in my app. Only the data table doesn't work.

I have submit form on submit button click. but I have use custom function like saveArea(areaForm.value,areaForm.valid). and In typescript file in function has if..else condition.if form submitted successfully submit and else doesn't want to close dialog and error message display..

I want to close dialog In IF. so please help. I have through MD2 documents but I cant found that.

I know about some methods of dialog
In .ts file
show(dialog: any) { dialog.show(); }
close(dialog: any) { dialog.close(); }

but it's not working it. I thought some custom methods.

======== HTML code =======

<md2-dialog #newArea title="Create a new area">
   <form [formGroup]="areaForm" novalidate (ngSubmit)="saveArea(areaForm.value,areaForm.valid)">
        <div class="col-md-12">
           <md-input formControlName="name" class="form-control" type="text" placeholder="Enter area name"></md-input>
        </div>
        <div class="clearfix"></div>
        <md2-dialog-footer>
            <button button type="button" (click)="newArea.close()" [ngClass]="'modal-cancel-btn'">Cancel</button>
           <button button [ngClass]="'modal-save-btn'">Create</button>
        </md2-dialog-footer>
    </form>
</md2-dialog>

======= typescript code ========

saveArea(value: any, isFormValid: boolean) {`
    console.log(value);
    this.isFormSubmitted = true;
    this.isFormInvalid = isFormValid;
    if (isFormValid) {
      if (this.selectedArea == null) {
        this.donationAreaManagementService.addArea(value).subscribe(result => {
          this.initialize()
        })
      } else {
        let body = {
          "name": value.name,

        }
        this.donationAreaManagementService.editArea(this.selectedArea.areaId, body).subscribe(result => {
          this.initialize()
        })
      }
    }
  }

<md2-accordion [multiple]="false">
<md2-accordion-tab *ngFor="let tab of accordions"
[header]="tab.title"
[active]="tab.active"
[disabled]="tab.disabled">

                <p *ngFor="let t of tab.content" style="margin-top:0px;cursor: pointer;color: red;}">
                    <span (click)="AccordianClick(t)">{{t.name}}</span>
                </p>

let content = [{"id":1,"name":"aaaaa","link":"1111"},
{"id":2,"name":"bbbbb","link":"2222"},
{"id":3,"name":"cccc","link":"3333"}
];

let tt1 = {"title":"first","active":true,"disabled":false,"content":content};
let tt2 = {"title":"second","active":true,"disabled":false,"content":content};

this.accordions.push(tt1);
this.accordions.push(tt2);
this.accordions.push(tt1);

If i will give [multiple]="false" but when page load that time all accordion are open.
And when click once all accordion then work fine.

When page load then default all accordion should be close or might be some configuration based.

It seems you should have:

   map: {
      'md2': 'node_modules/md2/bundles',
},

rather than:

  map: {
    'md2': 'node_modules/md2'
  },

What events are possible for this modal component?

thx