Styjun

I'm trying to target an element in my template through a template variable but it keeps returning undefined.

When you navigate to a certain route in my application, my component fetches some data inside the forkJoin method from rxjs. It's quite a bit of data and I'm on a slow connection so there is a 2 second delay, hence, I have an intermediate state, where I display a loading spinner, which then disappears when all the data comes back.

My template code looks something like...

<div class="container" *ngIf="ready; else loading">
 <mat-horizontal-stepper labelPosition="bottom" #stepper>
 <mat-step label="Step 1"> Step 1 Content... </mat-step>
 <mat-step label="Step 2"> Step 2 Content... </mat-step>
 <mat-step label="Step 3"> Step 3 Content... </mat-step>
 </mat-horizontal-stepper>
</div>

<ng-template #loading>
 <mat-spinner></mat-spinner>
</ng-template>

My component.ts file looks like this...

public ready = false;
public dataset1;
public dataset2;
@ViewChild('stepper') private myStepper: MatStepper;

constructor(private dataService: DataService) 

ngOnInit() 
 this.fetch();
 console.log(this.myStepper); // returns undefined


ngAfterViewInit() 
 console.log(this.myStepper); // also returns undefined


public fetch() 
 return forkJoin(
 this.dataService.getDataSet1(),
 this.dataService.getDataset2()
 ).subscribe(res => 
 this.dataset1 = res[0];
 this.dataset2 = res[1];
 this.ready = true;
 , error => console.log('Error : ', error));

I'd like to be able to target the stepper and get the total count of the steps and use those to navigate to a different step based on some user activity but I can't do that if I keep getting undefined.
How might I fix this?

Because you have it inside a *ngIf block, you will not able to access it until whatever he *ngIf is conditional to is true as this directive does not load the html elements until it is true, including your stepper. This means you could check for the value where I have added it in the snippet below. As at this point you set your ready variable to true meaning that section of the html will also be available. This might be a good point to call a function to run your logic.

As mentioned in the comment it would be ideal to call the change detection before trying to access. This can be done by injecting ChangeDetectorRef through the constructor.

import ChangeDetectorRef from '@angular/core';

Make sure your imports above include, ChangeDetectorRef.

constructor(private ref: ChangeDetectorRef,
 private dataService: DataService) 

public fetch() {
 return forkJoin(
 this.dataService.getDataSet1(),
 this.dataService.getDataset2()
 ).subscribe(res => 
 this.dataset1 = res[0];
 this.dataset2 = res[1];
 this.ready = true;

 this.ref.detectChanges();
 console.log(this.stepper); // you will be able to read it here.

, error => console.log('Error : ', error));

This article helps explain the dom behaviour with *ngIf.

Something else to take into account would be using a setter for the ViewChild, this means the value would only be set when the *ngIf is true. Meaning it would be available as soon as it has been rendered in the dom. This is a good way to get the reference and would look like. This will also be initially set with undefined until change detection has run or been manually run.

public myStepper: MatStepper;

@ViewChild('stepper') set content(content: MatStepper) 
 this.myStepper = content;

That way you can reference your ViewChild and interact with it through this.myStepper.