Mat-Stepper - change specific steps to just dots

Question

I've seen this post on how to remove the header Remove the Material Stepper header

But all I want on specific steps is to display none on span showing the number.

Hide this inner part of the stepper:

<span class="mat-step-icon-content ng-star-inserted">1</span>

I tried with id and .span:after or just .span with display none, but no luck..

#importer > .span{
  display:none;
}

This one works but I don't want it to disappear all together.. just the number and just on specific steps..

::ng-deep #importer > .mat-horizontal-stepper-header-container {
  display: none !important;
}

Udpate

import {
  Component,
  OnInit,
  ViewChild,
  ChangeDetectorRef
} from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  Validators
} from '@angular/forms';
import {
  Entity
} from '../../models/entity';
import {
  EntityComponent
} from '../../entity/entity/entity/entity.component';
import {
  MatStepper
} from '@angular/material';
import {
  stepperActions
} from '../../models/stepper-actions';

@Component({
  selector: 'stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.scss']
})
export class StepperComponent implements OnInit {
  isLinear = false;
  steps = new Array(13);

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {
    this.cd.detectChanges();
  }

}

@mixin hide-option($index, $label: '') {
  mat-step-header:nth-of-type(#{$index}) {
    .mat-step-icon-not-touched span,
    .mat-step-icon span,
    .mat-step-icon-not-touched .mat-icon,
    .mat-step-icon .mat-icon {
      display: none;
    }
    @if ($label=='') {
      .mat-step-icon {
        height: 5px !important;
        width: 5px !important;
      }
    }
    .mat-step-icon-not-touched:after,
    .mat-step-icon:after {
      content: $label;
      position: absolute;
      left: 8px;
      top: 3px;
    }
  }
}

:host /deep/ {
  mat-step-header .mat-step-label {
    overflow: visible;
  }
  @include hide-option(1, '1');
  @include hide-option(2);
  @include hide-option(3);
  @include hide-option(4);
  @include hide-option(5, '2');
  @include hide-option(6);
  @include hide-option(7);
  @include hide-option(8);
  @include hide-option(9, '3');
  @include hide-option(10, '4');
  @include hide-option(11);
  @include hide-option(12, '5');
  @include hide-option(13, '6');
}

<div class="teal-theme">
  <mat-horizontal-stepper [linear]="true" #stepper>
    <mat-step *ngFor="let i of steps" [stepControl]="i.childForm">
      <cby-step #i [stepper]='stepper'></cby-step>
    </mat-step>
  </mat-horizontal-stepper>
</div>

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
import {
  MatStepper
} from '@angular/material';
import {
  FormGroup,
  FormBuilder
} from '@angular/forms';



@Component({
  selector: 'cby-step',
  templateUrl: './cby-step.component.html',
  styleUrls: ['./cby-step.component.scss']
})
export class CbyStepComponent implements OnInit {
  @Input() stepper: MatStepper;
  public childForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.childForm = this.fb.group({
      id: [0, '']
    });
  }

  previous() {
    this.updateForm();
    this.stepper.previous();
  }

  next() {
    this.updateForm();
    this.stepper.next();
  }

  updateForm() {
    this.childForm.controls['id'].setValue(this.stepper.selectedIndex);
    console.log(this.childForm.controls['id'].value);
  }

}

<p>
  {{stepper.selectedIndex}} step works!
</p>
<button mat-button (click)="previous()">Back</button>
<button mat-button (click)="next()">Next</button>

See How it works https://drive.google.com/file/d/1ScbvJZdwQFUIuBggYe8D0jzEdgjGqLU-/view

Issues :

1) Responsiveness of the stepper ;

2) The right style is only after passing through the specific stepper step

As a quick meta note, please read tag descriptions before using them. The [Design] tag [is currently in the process of being deleted](https://meta.stackoverflow.com/questions/320690/the-design-tag-is-being-burninated), so please refrain from using it in future. — Michael Dodd, Nov 20 '18 at 13:58
This style will hide all numbers in a mat-step `::ng-deep .mat-step-icon-content { display: none !important; }`. What's your criteria to hide the number of a specific step? — Bon Macalindong, Nov 20 '18 at 14:55
As you can see in the picture - I have 12 steps , only 6 of them need numbers and not on after another.. Meaning - first form, then dot for each form , than next number for 4th form.. etc. by the picture — Tzvi Gregory Kaidanov, Nov 20 '18 at 15:31
can i somehow combine what you wrote with counting elements like stated here: https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has — Tzvi Gregory Kaidanov, Nov 20 '18 at 15:35
I've also seen this answer by @Teddy Sterne , but it seems to change all the headers whereas we need to change it specifically to internal logic https://stackoverflow.com/questions/49560728/how-to-change-angular-material-stepper-step-numbers-to-any-icon-or-text — Tzvi Gregory Kaidanov, Nov 20 '18 at 15:36
@BonMacalindong also removes all the numbers in the headers.. — Tzvi Gregory Kaidanov, Nov 20 '18 at 15:49

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

You won't be able to do this by using classes so it will not be able to be dynamic. If this is not a problem then I would recommend using a SASS mixin to create the styles you will need for each header item. Example:

Demo

@mixin hide-option($index, $label: '') {
  mat-step-header:nth-of-type(#{$index}) {
    .mat-step-icon-not-touched span,
    .mat-step-icon span,
    .mat-step-icon-not-touched .mat-icon,
    .mat-step-icon .mat-icon {
      display: none;
    }

    @if ($label == '') {
      .mat-step-icon {
        height: 5px;
        width: 5px;
      }
    }

    .mat-step-icon-not-touched:after,
    .mat-step-icon:after {
      content: $label;
      position: absolute;
      left: 8px;
      top: 3px;
    }
  }
}

:host /deep/ {

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

  @include hide-option(1, '1');
  @include hide-option(2);
  @include hide-option(3);
  @include hide-option(4);
  @include hide-option(5, '2');
  @include hide-option(6);
  @include hide-option(7);
  @include hide-option(8);
  @include hide-option(9, '3');
  @include hide-option(10, '4');
  @include hide-option(11);
  @include hide-option(12, '5');
  @include hide-option(13, '6');
}

Thanks a lot . However please the the Issues as described in the update in my question: 1) Responsiveness of the stepper ; 2) The right style is only after passing through the specific stepper step — Tzvi Gregory Kaidanov, Nov 21 '18 at 09:12

Mat-Stepper - change specific steps to just dots

1 Answers1

Demo

Linked