question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
inskacommented, Aug 11, 2016

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';

1reaction
gaborkalmarcommented, Aug 11, 2016

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Errors upgrading from angular 2 to angular 5 - Stack Overflow
When I try to add the version for angular/router specified in the new package.json below all sorts of normal typsescript types such as...
Read more >
Angular versioning and releases
Angular versions v2 to v12 are no longer under support. LTS fixeslink. As a general rule, a fix is considered for an LTS...
Read more >
Starting an Angular 2 RC.5 project - Yakov Fain
The current version of Angular is Release Candidate 5. It has been released an hour ago, and I've started learning again. The major...
Read more >
@angular/material - npm
Tip: Click on a version number to view a previous version's package page. Current Tags. Version. Downloads (Last 7 Days).
Read more >
Changelog of ngx-extended-pdf-viewer - PdfShowcase
IE11 compatibility is yet to be tested, it may or may not be broken. ... 1.7.7 #169 fix a Angular 9.0.0-rc.1 bug by...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found