Within my app.component.ts, I am invoking a function from a service that returns the result of an HTTP request:
questions: QuestionBase<any>[];
constructor(service: QuestionService) {
this.questions = service.getQuestions().subscribe(val => console.log(val)); // gets logged after the other console log below
}
In the child component, the array named questions is further processed:
@Input() questions: QuestionBase<any>[] = [];
form: FormGroup;
constructor(private qcs: QuestionControlService) {}
ngOnInit() {
console.log("onInit", this.questions); // called before questions is filled
this.form = this.qcs.toFormGroup(this.questions);
}
The issue I am facing now is that the toFormGroup function within ngOnInit is getting called too early when the HTTP request hasn't completed yet. Given my lack of familiarity with Observables, I'm unsure how to ensure the function is only called after the HTTP request in getQuestions has finished. I have attempted using ngOnChanges, but it seems to trigger even before ngOnInit.