Angular Material 2 - Disable Ripple?

angular-material2
Cleudi picture Cleudi · Dec 15, 2016 · Viewed 35.9k times · Source

I'm currently working with md-tab-group (just updated to latest version yesterday)...

Does anyone know

  1. if it is possible to disable/configure Ripple on existing components (md-tab-group in this case)? Latest version causes my tab headers to jump because ripple is calculating large values, solution is to add a small value for md-ripple-max-radius for md-tab-label directly in the template of MdTabGroup.
  2. if there are plans to remove min-width for md-tab-labels? I'm working with a quite small tab group (only 300px width), therefore 160px min-width is not usable.

Thank you!

Answer

Alireza picture Alireza · Jun 15, 2017

Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material.

Just simply do something like this:

<md-tab-group disableRipple></md-tab-group>

Also if you are using the latest Angular Material, it's a little bit different like this below:

<mat-tab-group [disableRipple]="true"></mat-tab-group>

Related questions

mat-form-field must contain a MatFormFieldControl

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this: field: <mat-form-field> <ng-content></ng-content> <mat-hint align="start"><strong>{{hint}}&…

Read More
Angular Material: mat-select not selecting default

I have a mat-select where the options are all objects defined in an array. I am trying to set the value to default to one of the options, however it is being left selected when the page renders. My typescript …

Read More
Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template. <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"&…

Read More