CODEWITHSUNDEEP
angularangular-materialangular5
kathikeyan A
kathikeyan A

Reputation: 1877

Angular material 'disableRipple' for mat-selection-list not working in mobile

I should prevent any or all animations that happen while interacting with Angular Material components in my app

The expectation is, when I touch/click an item in the mat-selection-list, It should not show any sort of fadeIn animation as it does normally

I am using NoopAnimationsModule and I do not use BrowserAnimationModule in my app.module.ts

Following is the code fragment that works fine on desktop but is not working on mobile 

<mat-selection-list disableRipple (selectionChange)="onValueChange($event)">
          <mat-list-option (click)="proxyClick($event,'checkbox')" (touch)="proxyClick($event,'checkbox')" *ngFor="let item of list"
            [selected]="item.selected" [disabled]="item.disabled" value="{{ item.name }}" disableRipple>

            <span disableRipple>{{item.name}} ({{item.count}})</span>
          </mat-list-option>
        </mat-selection-list>

Just in case, the proxyClick method just helps me stop propagating the click/touch

 public proxyClick(event, targetGroupIdentified?: string) {    
    if (targetGroupIdentified) {
      event.cancelBubble = true;
      event.stopPropagation();
      return false;
    }
 }

I have tried the following instead of disableRipple. They only work on the desktop but not on mobile for a mat-selection-list element

  1. Have tried [disableRipple]="true" instead of disableRipple

  2. Have tried adding [@.disabled]="true" to almost all tags in my HTML file

  3. Have tried adding @HostBinding('@.disabled') disabled = true; to my component.ts file

EDIT 1 - Tried the following and it did not help either. Seems like the style change is happening through a code in core.js file in /node_modules/@angular/material folder and is possibly overriding the style definitions in scss

::ng-deep * {
    /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
}

My Work environment specifications are as follows

"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.2.4",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/platform-server": "^5.0.0",
"@angular/router": "^5.0.0",

Appreciate any help/pointers please.

Upvotes: 2

Views: 3563

Answers (2)

davimdantas
davimdantas

Reputation: 143

I was looking for the same thing, here is my solution: Working on Angular 6.

<mat-selection-list >
     <mat-list-option  [disableRipple]="true">
     </mat-list-option>
</mat-selection-list>

CSS: 

.mat-list-option, .mat-list-option:hover, .mat-list-option.mat-list-item-focus{
   background: inherit;
}
.mat-selection-list /deep/ .mat-list-item-disabled  h5, .mat-selection-list /deep/ .mat-list-item-disabled mat-pseudo-checkbox {
    color: #b0b0b0;
}

Upvotes: 4

Yousef khan
Yousef khan

Reputation: 3194

Try

.mat-selection-list{ transition: none; }

Replace the class with your list class. Try it on option as well.

Upvotes: 0

Related Questions