I've been busy working on a Mat-Stepper, actually two of them. I have a component that contains two ng-templates set up like this:
Question: Why is my selected index not functioning as expected? Am I missing something? I know you can define
[selectedIndex]="condition"<div *ngIf="!isSmallScreen; then horizontalStepper else verticalStepper"></div>
verticalStepper:
<ng-template #verticalStepper>
<mat-vertical-stepper [linear]="isLinear"
style="z-index: 1; display: inline;"
class="container-fluid width-limit">
<mat-step [completed]="condition1"></matstep>
<mat-step [completed]="condition2"></matstep>
</mat-vertical-stepper>
</ng-template>
horizontalStepper:
<ng-template #horizontallStepper>
<mat-horizontal-stepper [linear]="isLinear"
style="z-index: 1; display: inline;"
class="container-fluid width-limit">
<mat-step [completed]="condition1"></matstep>
<mat-step [completed]="condition2"></matstep>
</mat-vertical-stepper>
</ng-template>
This is the parent function responsible for handling the Selected Index:
ngAfterViewInit() {
if (!conition1) {
this.move(0);
} else if (condition1) {
this.move(1);
} else if (condition2) {
this.move(2);
}
}
This function is supposed to set the index but doesn't seem to be working:
move(index: number) {
if (this.isSmallScreen) {
this.verticalStepper.selectedIndex = index;
} else {
this.horizontalStepper.selectedIndex = index;
}
}
As for the variable 'smallscreen':
@HostListener('window:resize', ['$event'])
onResize(event) {
if (event.target.innerWidth >= 600) {
this.isSmallScreen = false;
} else {
this.isSmallScreen = true;
}
}
These are my ViewChildren:
export class GuidedSearchComponent implements OnInit, AfterViewInit {
@ViewChild('verticalStepper') verticalStepper: MatStepper;
@ViewChild('horizontalStepper') horizontalStepper: MatStepper;