CODEWITHSUNDEEP
angularangular-material
Afsun Khammadli
Afsun Khammadli

Reputation: 2068

How to change angular material stepper step numbers to any icon or text?

Angular Material Stepper has following problems for me which I can not found from documentation.

  1. How can I display any string or html instead of stepper index numbers?
  2. How can display matToolTip when mouse hover any mat step?

I am using latest version of Material Angular IO.

Upvotes: 8

Views: 14610

Answers (4)

Aiden Dipple
Aiden Dipple

Reputation: 274

I could not get the above selected answer to work, but for icons I did get this other SO answer to work successfully. I'm didn't test for text, only icons.

Change step number to a mat-icon in an Angular Material Stepper

Although the answer for me also needed me to workout how to import the stated provided (wasn't included in the answer).

import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';

I also found a good demo in Stackblitz:

https://stackblitz.com/angular/maxbjapeayr?file=app/stepper-states-example.ts

Upvotes: 0

Mohammadreza Imani
Mohammadreza Imani

Reputation: 340

I think this could be work for you.

<ng-template matStepLabel>
    <span matTooltip="Fill out your name">Fill out your name</span>
</ng-template>

Upvotes: 1

bugs
bugs

Reputation: 15313

To answer the second part of your question, you can easily display a tooltip by wrapping the content of <ng-template matStepLabel> into a div with a matTooltip property. This demo shows an example.

Upvotes: 1

Teddy Sterne
Teddy Sterne

Reputation: 14201

Unfortunately, right now it is impossible to override the number using native hooks from material. One possible solution is to use css to overwrite the value.

Here we hide the current symbol and use our own text/symbols:

mat-step-header .mat-step-label {
    overflow: visible;
}

mat-step-header .mat-step-icon-not-touched span,
mat-step-header .mat-step-icon span,
mat-step-header .mat-step-icon-not-touched .mat-icon,
mat-step-header .mat-step-icon .mat-icon {
  display: none;
}

mat-step-header:nth-of-type(1) .mat-step-icon-not-touched:after,
mat-step-header:nth-of-type(1) .mat-step-icon:after {
  content: 'New 1';
}

.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon-not-touched::after,
.active-step-1 mat-step-header:nth-of-type(1) .mat-step-icon::after {
  content: 'add_circle' !important; /* name of the material icon */
  font-family: 'Material Icons' !important;
  font-feature-settings: 'liga' 1;
}

Upvotes: 7

Related Questions