CODEWITHSUNDEEP
angular-materialangular-material2
Felix
Felix

Reputation: 1810

Angular material button - how to enable ripple on hover same as check box

I have two control elements side by side. One is - same as here

<mat-checkbox>Check me!</mat-checkbox>

and the other is material icon button

  <button mat-icon-button>
    <mat-icon>home</mat-icon>
  </button>

When we point at (hover over) the checkbox, it shows a gray circular ripple around it (by default).

But the button does not have the same effect when we point at it. To maintain the consistency of the two controls, I want the same ripple effect on the icon-button when user points at (hovers over) it. The ripple needs to have the same circular shape, the same color, and the same size on both elements.

How can that be achieved?

Upvotes: 0

Views: 3218

Answers (1)

Ruddy Tung
Ruddy Tung

Reputation: 29

you should try Directive to trigger ripple.

@Directive({
selector: '[rippleOnHover]',
providers: [MatRipple]})

rippleRef;
constructor(
    private _elementRef: ElementRef,
    private ripple: MatRipple
) {}
@HostListener('mouseenter') onMouseEnter(): void {
    if (this._elementRef && this._elementRef.nativeElement) {
        this._elementRef.nativeElement.style.overflow = 'hidden';
    }
    
    if (this.ripple) {
        this.rippleRef = this.ripple.launch({ centered: true, persistent: true });
    }
}
@HostListener('mouseleave') onMouseLeave(): void {
    if (this.rippleRef) {
        this.rippleRef.fadeOut();
    }
}}

i base on answer Angular 5 attribute directive add mat-ripple to host element & https://material.angular.io/components/ripple/overview

Upvotes: 3

Related Questions