I saw earlier that Angular2 launched the RC5 so I decided to update one of my test apps to see the changes and how to adjust. This app is using Material2, I also updated it to Alpha 7.2, but I'm getting this error when trying to use the md-button component
"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"
I'm using it on a new component I'm trying to add called nav-bar
, here's the Angular CLI created file with Material added
TypeScript File
import { Component, OnInit } from '@angular/core';
import { MdToolbar } from '@angular2-material/toolbar';
import { MdButton } from '@angular2-material/button';
import { MdIcon, MdIconRegistry } from '@angular2-material/icon';
@Component({
moduleId: module.id,
selector: 'nav-bar',
templateUrl: 'nav-bar.component.html',
styleUrls: ['nav-bar.component.css'],
directives: [
MdToolbar,
MdButton,
MdIcon
],
providers: [
MdIconRegistry
]
})
export class NavBarComponent implements OnInit {
constructor() {}
ngOnInit() {
}
}
HTML File
<md-toolbar>
<button md-button>
<md-icon>menu</md-icon>
</button>
NavBar
</md-toolbar>
Best Answer
Try to import
MdRippleModule
in yourAppModule
:Or pass
MdRipple
directive within your component: