@Input not receiving data from parent component

Question

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 @Inputs and I don't see what I'm doing different.

Answer 1

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.