How to change angular material stepper step number

问题:

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.

回答1:

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;
}

回答2:

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.