I just started working with the @Input
feature of Angular and everything has been good so far up until this point. I'm using Firebase as my database and the chunk of data I'm calling in 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 problem I'm having right now is getting the child component to read the questions
data which console.log()
s perfectly fine in the parent component, which means the service file is delivering it. Here's how I'm calling it up.
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 went back into the parent component and made a call for it in it's own call to the database like this
this._homeService.getBusImage().subscribe(BusImage => {
this.busImageQuesO = BusImage.questions;
console.log(this.busImageQuesO);
});
and it still didn't make a difference in the child component. The other one shows up fine as well as all the others through other elements I've been working on.
I've seen in some of the articles and tutorials I've come across that they emphasize importing and declaring the child component in the parent component, but I've seen others where they just work with it being declared in the main module the parent component is linked to, which is how I have it set up. I don't know if this makes a difference or not. I've seen other examples of importing multiple @Input
s and I don't see what I'm doing different.
try to change ngOnInit()
with ngOnChanges()
in the Child component, and do not forget the relevant other changes by importing OnChanges
and implementing it. For further informations check this.