How to make Angular Material Chips static?-CodePudding

I'm trying to do something similar to this: https://material.angularjs.org/1.1.9/demo/chips#static-chips where the chips aren't selectable, clickable or hoverable and just want it to be a static chip. However, I am using Angular Material for this.

Is it possible to do the same thing with Angular Material? I know there's a Static Content section in the Angular Material documentations where you do:

<mat-chip-set role="list">
  <mat-chip role="listitem"> Sugar </mat-chip>
  <mat-chip role="listitem"> Spice </mat-chip>
  <mat-chip role="listitem"> Everything Nice </mat-chip>
</mat-chip-set>

However, I tried that and it didn't work. Basically what I want to do:

Remove the grey color when you hover over the mat-chip
Remove the ripple effect when you click on the mat-chip (I found you can do this doing [disableRipple]="true"?)
Remove the grey color when you click on the mat-chip

I don't want any effect at all when you hover or click on the chip. Is there a way to do this with angular material? Here is how my code looks at the moment:

<mat-chip-list >
  <mat-chip>Public</mat-chip>
  <mat-chip>Private</mat-chip>
  <mat-chip>Confidential</mat-chip>
</mat-chip-list>

CodePudding user response：

You can remove the ripple effect by defining to disableRipple as true. For the hover effect, you could customize the mat-chip element like the following, FYI, I tested this with Angular Material v15 which has mat-chip-listbox instead of mat-chip-list:

component template HTML

<mat-chip-listbox>
  <mat-chip [disableRipple]="true">Public</mat-chip>
  <mat-chip [disableRipple]="true">Private</mat-chip>
  <mat-chip [disableRipple]="true">Confidential</mat-chip>
</mat-chip-listbox>

component .scss styles

mat-chip {
  pointer-events: none; // maybe use it along with !important

  &:hover {
    background-color: unset; // maybe use it along with !important
  }
}

Or .css:

mat-chip {
  pointer-events: none;
}

mat-chip:hover {
  background-color: unset;
}

CodePudding user response：

Two options

use <mat-chip>
use disabled with css

<mat-chip-set aria-label="Fish selection">
  <mat-chip>Two fish</mat-chip>
  <mat-chip-option disabled class='chip'>Warn fish</mat-chip-option>
</mat-chip-set>

Here is the code example