CODEWITHSUNDEEP
angularangular-material
Albovsky
Albovsky

Reputation: 165

Angular Material mat-ripple isn't working

I'm trying to add ripple effect to one button, but it crashes whole webpage. When I just add matRipple to my button nothing happens. When I try to add color [matRippleColor]="white" I get "Can't bind to 'matRippleColor' since it isn't a known property of 'button'".

That strange because I enabled ripples on other page of website and it works just fine. (So yes, I've imported MatRippleModule):enter image description here

HTML:

<button  matRipple class="submit-button" color="accent" type="submit" >
  <mat-icon>search</mat-icon><span>Szukaj</span>
</button>

Upvotes: 2

Views: 14280

Answers (2)

nash11
nash11

Reputation: 8650

When you use [matRippleColor]="white", Angular evaluates "white" to a template expression. Since you have not defined a variable white in your component, this evaluates to undefined. If you want to pass the color white to the [matRippleColor], you need to pass it as a string like below

<button matRipple [matRippleColor]="'white'" type="submit" class="submit-button">
    <mat-icon>search</mat-icon><span>Szukaj</span>
</button>

The issue could also be with the version of @angular/material you are using. MatRippleModule works slightly differently for the different versions of @angular/material

MatRippleModule was introduced in Angular Material 6 so it will not work with versions 5 and below.

In Angular Material 6, the ripple overflows outside your element. This can be fixed by adding position: relative to your element CSS like below

.submit-button {
    position: relative;
}

In Angular Material 7, the position: relative CSS property has been added to the .mat-ripple class of the library so it is not required to add position: relative to the element in your CSS. The same goes for Angular Material 8.

Here is a simple example on StackBlitz on Angular 7 where you can dynamically change the color. For a constant color, just change [matRippleColor]="rippleColor" to [matRippleColor]="'white'" or any color of your choice.

Upvotes: 1

Christian G&#225;lvez
Christian G&#225;lvez

Reputation: 183

That is because the input property matRippleColor expect a string and you are passing a variable that Angular supposed you have initialized before and in this case you have a variable that I supposed doesn't exist in your component.

If you want the white color be recognized you have to pass it as string since you are using the binding feature:

[matRippleColor]="'white'"

or you can remove the curly brackets and using it like this:

matRippleColor="white"

Upvotes: 3

Related Questions