Looks like compatibility issue with Angular to 2.0.0-rc.5

Bug, feature request, or proposal:

Not sure, whether to call this a bug or feature request, as there is no mention of angular 2 version compatibility with 2.0.0-alpha.7-2 in material documents. Actually, not sure whether the issue belongs here or should I raise this with Angular2 to keep the RC release backward compatible.

What is the expected behavior?

angular material component should work with latest release of angular 2

What is the current behavior?

Getting below error:

Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"): MdButton@0:180
Can't bind to 'md-ripple-color' since it isn't a known property of 'div'. ("ton-ripple" [class.md-button-ripple-round]="isRoundButton()" [md-ripple-trigger]="getHostElement()" [ERROR ->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton@0:219 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'md-ripple-tr…md-ripple-background-color="rgb"): MdButton@0:219", stack: "Error: Template parse errors:↵Can't bind to 'md-ri…ocalhost:4200/vendor/zone.js/dist/zone.js:356:38)"}consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Template parse errors:
Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"): MdButton@0:180
Can't bind to 'md-ripple-color' since it isn't a known property of 'div'. ("ton-ripple" [class.md-button-ripple-round]="isRoundButton()" [md-ripple-trigger]="getHostElement()" [ERROR ->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton@0:219
    at resolvePromise (http://localhost:4200/vendor/zone.js/dist/zone.js:538:32)
    at resolvePromise (http://localhost:4200/vendor/zone.js/dist/zone.js:523:18)
    at http://localhost:4200/vendor/zone.js/dist/zone.js:571:18
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
    at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
    at drainMicroTaskQueue (http://localhost:4200/vendor/zone.js/dist/zone.js:474:36)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:426:22)consoleError @ zone.js:463_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426

What are the steps to reproduce?

I know this won’t help much, but, I don’t know how to use plun here is the template I am using

<md-list *ngFor="let name of nameList" >
    <md-list-item >
        <div class="md-list-item-text" >
            <button md-button (click)="showDetailsOfName(name)" >{{name}}</button>
        </div>
    </md-list-item>
</md-list>

Tried with Plunker, but got lost in resolving script dependencies for rc.5. That says, I don’t know anything about Plunker.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Angular Version: 2.0.0-rc.5 Material Version: @angular2-material/button@2.0.0-alpha.7-2 OS: Windows 7 Browser Version: Google Chrome 52.0.2743.116 m

Is there anything else we should know?

[inska]

Resolved this problem… @gaborkalmar and @meritor, How did you import material design modules? Did you import like as below? import { MdButtonModule } from '@angular2-material/button'; import { MdRippleModule } from '@angular2-material/core/ripple/ripple';

[gaborkalmar]

I did not import the ripple directive, that was it. Thanks.