0

I tried to print stepper into stepper:

<mat-vertical-stepper>
        <mat-step *ngFor="let step of Steps" [label]="step.name">
          <mat-vertical-stepper>
            <mat-step *ngFor="let substep of step.subnames" [label]="substep.subname">
            </mat-step>
          </mat-vertical-stepper>
          </mat-step>
    </mat-vertical-stepper>

It works but I would like to change numerotation:

change

  • 1
    • 1
    • 2
  • 2
    • 1
    • 2

into

  • 1
    • 1.1
    • 1.2
  • 2
    • 2.1
    • 2.2

How to do this, please?

Pim92
  • 99
  • 1
  • 5
  • 15

2 Answers2

2

Try something like this:

EXAMPLE DEMO

style.css:

.mat-vertical-stepper-header .mat-step-icon, .mat-vertical-stepper-header .mat-step-icon-not-touched {
  font-size: 0px;
    margin-left: 10px;
    background-color: black;
    height: 5px;
    width: 5px;
}
.mat-vertical-stepper-header .mat-step-icon, .mat-vertical-stepper-header .mat-step-icon-touched {
  font-size: 0px;
    margin-left: 10px;
    background-color: black;
    height: 5px;
    width: 5px;
}

mat-step-header[ng-reflect-selected="true"] .mat-step-icon{ 
  font-size: 12px;
  align-self: center;
  color: white;
  height: 20px;
  width: 20px;
}
mat-step-header[ng-reflect-selected="false"] .mat-step-icon .mat-icon{ 
 display: none
}

HTML:

<mat-vertical-stepper>
    <mat-step *ngFor="let step of Steps; let i= index;" [label]="step.name">
        <mat-vertical-stepper>
            <mat-step *ngFor="let substep of step.subnames; let j = index" label="{{i+1}}.{{j+1}}">
            </mat-step>
        </mat-vertical-stepper>
    </mat-step>
</mat-vertical-stepper>
Akj
  • 7,038
  • 3
  • 28
  • 40
  • 1
    Thanks, it works too, is it possible to have index number into the bubble? – Pim92 Aug 24 '18 at 10:15
  • thanks but it seems index numbers are not into the bubbles, maybe it is not possible? – Pim92 Aug 24 '18 at 11:04
  • Do you want numbers as well?? Every thing is possible – Akj Aug 24 '18 at 11:04
  • in the first version, there was bubble1 :1, bubble 1 : 1.1, bubble 2 : 1.2... I would like bubble 1, bubble 1.1, bubble 1.2.. using stepper bubble – Pim92 Aug 24 '18 at 11:07
  • the image you shown in question i have done same thing. if you want something more ?? – Akj Aug 24 '18 at 11:09
  • Let's try other words: in this example, https://material.angular.io/components/stepper/overview there is "bubble1 Fill out ", bubble1 means "number 1 circled", is this possible to have index numbers as 1.1 circled like this? – Pim92 Aug 24 '18 at 11:26
  • Do you want it for all bubbles or only selected one?? – Akj Aug 24 '18 at 11:31
  • something like last url, grey bubble if unselected and blue if selected, but if it is not too much? I asked this question because I thought it was only a parameter question... – Pim92 Aug 24 '18 at 11:36
  • 1
    Thanks, you helped me a lot and I learned a lot too :) If you come in Paris, I'll buy you a drink ^^ – Pim92 Aug 24 '18 at 12:28
  • 1
    @Pim92 thanks for your complement. I will let u know if will be there. – Akj Aug 24 '18 at 12:34
1

You can use javascript syntax inside bind expression

<mat-step *ngFor="let substep of step.subnames" [label]="[step.name,substep.subname].join('.')">
</mat-step>

or just 

[label]="step.name + '.' + substep.subname"

But it's slow down performance for large menu because it requires calculate expression every time angular do "dirty check" (if you don't use onPush strategy).

So think about adding changeDetection: ChangeDetectionStrategy.OnPush for menu component, or precalulate full submenu label before using.

Andreq Frenkel
  • 1,188
  • 9
  • 14