In my MatHorizontalStepper parent component, I utilize the subscribe function to monitor changes in an Observable within a service. The purpose is to automatically progress to the next step in the stepper when the observable switches from false to true.
Despite my efforts, I am encountering difficulties with updating the step correctly. Here are the two components I have implemented:
Parent Component
import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { MatHorizontalStepper } from '@angular/material';
import 'rxjs/observable/of';
// Services
import { StepperService } from './services/stepper.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: './app.component.css'
})
export class AppComponent implements OnInit {
@ViewChild('stepper') mainStepper: MatHorizontalStepper;
constructor(
private stepperService: StepperService
) { }
ngOnInit() {
console.log('Migration Service launched.');
this.stepperService.stageOne.subscribe((result) => {
if (result) {
console.log('Moving to stage 2.');
this.mainStepper.selectedIndex = 1;
}
});
}
}
Service
The service monitors the completion of a form within a component by utilizing formComplete to update the appropriate stage.
import { Injectable, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import { MatHorizontalStepper } from '@angular/material/stepper';
import { FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/observable/of';
export class StepperService {
@ViewChild('stepper') stepper: MatHorizontalStepper;
// A stage can be incomplete (false) or complete (true).
stageOne: Observable<boolean> = Observable.of(false);
// Function accepts FormGroup from another component
formComplete(receivedForm: FormGroup, receivedStepper: MatHorizontalStepper) {
if (receivedForm.status === 'VALID') {
switch (receivedStepper.selectedIndex) {
case 1:
this.stageOne = Observable.of(true);
console.log('Stage one complete.');
break;
default:
break;
}
}
}
}
What steps should I take to ensure that the parent component captures the updated status of the observable in the service?