Recently, I delved into the workings of Angular's @Input feature and have found it quite useful thus far. My database is Firebase, and the data snippet I am fetching looks like this:
{
"page_area_business_image" : {
"expand" : {
"intro" : "some info...",
"title" : "a title"
},
"rebrand" : {....},
"newbrand" : {....},
"questions" : {
"question01" : {
"id" : "an ID",
"name" : "a name",
"question" : "a question",
"answers" : {
"answer01" : {
"answer" : "some answer",
"id" : "an ID"
},
"answer02" : {
"answer" : "another answer",
"id" : "an ID"
}
}
},
"question02" : {....},
"question03" : {....}
}
}
}
The only hiccup I'm facing at the moment is getting the child component to read the questions data. The data logs perfectly in the parent component using console.log(), indicating that the service file is delivering it properly. Here's how I'm trying to access it:
Parent Component
private busExpInformation: FirebaseObjectObservable<any>;
private busImageO: FirebaseObjectObservable<any>;
private busImageQuesO: FirebaseObjectObservable<any>;
constructor(private _homeService: HomeService) { }
ngOnInit() {
this._homeService.getBusExpInformation().subscribe(BusExpInformation =>{
this.busExpInformation = BusExpInformation;
});
this._homeService.getBusImage().subscribe(BusImage => {
this.busImageO = BusImage.expand;
this.busImageQuesO = BusImage.questions;
console.log(this.busImageQuesO); //works fine here
});
}
Parent Template
<business-image [busImageI]="busImageO" [busImageQuesI]="busImageQuesO"></business-image>
Child Component
@Input('busImageI')
busImage: FirebaseObjectObservable<any>;
@Input('busImageQuesI')
questions: FirebaseObjectObservable<any>;
ngOnInit() {
console.log(this.questions);// doesn't return anything
}
I even tried making a separate call for it within the parent component like this:
this._homeService.getBusImage().subscribe(BusImage => {
this.busImageQuesO = BusImage.questions;
console.log(this.busImageQuesO);
});
Unfortunately, it did not resolve the issue within the child component. The other inputs work smoothly as well as all the others through different elements I've been working with.
I came across articles stressing the importance of importing and declaring the child component in the parent component. However, I've also seen cases where it is declared in the main module linked to the parent component, which is my current setup. I am unsure if this structure affects the behavior or if there might be something else I have overlooked while handling multiple @Inputs.