How to get MatstepLabel in component of Angular

Question

I am using this example- https://stackblitz.com/angular/amjgpjxbpak?file=app%2Fstepper-overview-example.ts

Can any one tell us how to get matStepLabel name in component.

Answer 1

As far as I can tell there is no clean solution, even if you dig into the Angular Material source. Accessing the MatStepLabel is simple, but then actually getting the label from it seems almost impossible.

Here is a stackblitz that shows how to access the step label, but be aware it is quite ugly.

It accesses the MatStepper via @ViewChild, retrieves the three MatStepHeader and then via nativeElement finds the actual innerText / textContent of the node.

import {Component, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatStepper } from '@angular/material';

/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.css'],
})
export class StepperOverviewExample implements OnInit, AfterViewInit {
  isLinear = false;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  @ViewChild(MatStepper) matStepper: MatStepper;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });    
  }

  ngAfterViewInit() {
    console.log(this.matStepper._stepHeader.toArray()[0]._element.nativeElement.childNodes[2].innerText);
    console.log(this.matStepper._stepHeader.toArray()[1]._element.nativeElement.childNodes[2].innerText);
    console.log(this.matStepper._stepHeader.toArray()[2]._element.nativeElement.childNodes[2].innerText);

    console.log(this.matStepper._stepHeader.toArray()[0]._element.nativeElement.querySelector('.mat-step-label').textContent);
    console.log(this.matStepper._stepHeader.toArray()[1]._element.nativeElement.querySelector('.mat-step-label').textContent);
    console.log(this.matStepper._stepHeader.toArray()[2]._element.nativeElement.querySelector('.mat-step-label').textContent);
  }
}


/**  Copyright 2018 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */