@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.

SeleM · Accepted Answer · 2019-07-17T08:33:58.617

5

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.

edited Jul 17 '19 at 08:33

answered Feb 03 '17 at 21:27

SeleM

9,310
5
32
51

ok great that worked. but why? I also noticed that at first it still came up undefined but then the object popped up right after. So it's just taking a while for the data to arrive? – Optiq Feb 03 '17 at 21:41
2

That happens because child's `ngOnInit` is called before your service Observable returns result. That is main idea of Observables, that script execution is not blocked until it is waiting for result. I.e. events goes like that: parent `ngOnInit` -> child `ngOnInit` -> service returned result -> it has been assigned to parent's variable -> it has been assigned to child's variable – A. Tim Feb 03 '17 at 22:01
I just noticed both of those links go to the Angular.io site. – Optiq Feb 04 '17 at 20:21
@DaMightyOptiq yes , the first one tells you what is in fact the `ngOnchanges` , the second one is for the differences between all Angular's lifecycle hooks. Actually they're both in one page but it was just to make it straight for you :) – SeleM Feb 04 '17 at 20:33
1

oh ok, just making sure it wasn't a mistake or something because I read the first one, then clicked the 2nd like "wait... this is the same page" lol. Thanks – Optiq Feb 04 '17 at 20:34

@Input not receiving data from parent component

1 Answers1