Angular Material 2 - Disable Ripple?

Question

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 1

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>

Answer 2

The current version of Angular I'm now working on is 15.2.6. This is the only way it worked for me when using components like MatStepper:

1. In app.module.ts

   import {MatRippleModule, MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';**
   

2. In the decorator of @NgModule, you should provide this in the providers[] array:

   providers: [{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true}}]
   

Answer 3

I came up with two ways to override md styles based on another post. I had the exact same problem for tabs being too wide in a small tab group. It is still very experimental and might need further explanations but it has worked for me.

1. First solution using Sass styling

You can use /deep/ before the class you are trying to override

/* your-component.component.scss file*/

/deep/ .md-tab-label {
  min-width: 0px; /* Or whatever value you wish */
  /* In some situations !important seems necessary */
}

<!-- your-component.component.html -->
<!-- Template from Angular Material's Github Readme.md -->
<md-tab-group>
  <md-tab>
    <template md-tab-label>
      The <em>best</em> pasta
    </template>
    <h1>Best pasta restaurants</h1>
    <p>...</p>
  </md-tab>
  <md-tab>
    <template md-tab-label>
      <md-icon>thumb_down</md-icon> The worst sushi
    </template>
    <h1>Terrible sushi restaurants</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

2. Second solution with pure css

   • Create an overrides.css file that you link in your main index.html and then override the material classes here

/* overrides.css */
.md-tab-label ,.md-tab-label-active {
  min-width: 0; /* same comments as the first solution */
}

<!-- index.html -->
<link rel="stylesheet" content="text/css" href="overrides.css">

Both are kinda dirty, but the first one provides me a good solution to override a md component's style, keeping the alterations inside the concerned components (consider wrapping those components for local changes only).

Answer 4

If you want to remove ripple and click effect in Angular v15 with Angular material v15 you can do it with the "disableRipple" property and some stylings.

<mat-checkbox
   formControlName="yes"
   disableRipple
   >Yes
</mat-checkbox>

Add styling rule to the styles.scss or styles.css:

   .mdc-checkbox__ripple { 
     display: none;
   }