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

[meritor]

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/[email protected]
OS: Windows 7
Browser Version: Google Chrome 52.0.2743.116 m

Is there anything else we should know?

[inska]

Reproduced to me

[gaborkalmar]

Same here with rc.5

[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.

[merito]

@inska OP is meritor, not merito. Correct to notify him.

[inska]

@merito Fixed. Sorry to bother you.

[jelbourn]

See #973

[meritor]

Thanks a million.. No error, after importing this properly.

import { MdButtonModule } from '@angular2-material/button';

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}