Parent - Child reactive input problem

angular
1

Hi Guys,

Here is my problem,

I have a parent component as follows

.html

. <div *ngIf=“venue”><show-images [images]=“venueImagesSubject | async”>

.ts

// the followings declared at class sope. They should be initialized while class created
venue: Venue;
venueImagesSubject: BehaviorSubject<string[]>([]);

At the beginning, my venue object is null. It gets populated from the publication result. At ngOnInit ı get the venue result from mongo server and populate the venue object. At this time I send images to the venueImagesSubject. Here it is,

ngOnInit() {
this.venue = this.findVenue(); // Single Venue Object. Not reactive
this.venueImagesSubject.next(this.venue.images); // venue has images array and I am setting it
}

Everything seems OK, right ? My child component is show-images component. Here it is

.html

Single text shown.

.ts

incomingImagesSuject: BehaviorSubject<string[]>([]);

@Input(‘images’)
set images(values) {
this.incomingImagesSuject.next(values);
}

get images() {
return this.incomingImagesSuject.getValue();
}

// subscription done on ngOnInit
ngOnInit(): void {
//subscribe all of the images of related documents
this.subscribeImages();
}

This should work but it doesn’t. I get the following error.

ERROR TypeError: Cannot read property ‘subscribe’ of undefined
at createDirectiveInstance (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:104478)
at createViewNodes (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:105932)
at createEmbeddedView (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:105809)
at callWithDebugContext (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:107246)
at Object.debugCreateEmbeddedView [as createEmbeddedView] (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:106558)
at TemplateRef_.createEmbeddedView (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:103884)
at ViewContainerRef_.createEmbeddedView (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:103596)
at NgIf._updateView (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:114398)
at NgIf.set [as ngIf] (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:114354)
at updateProp (modules.js?hash=e214739a9da89d71d7e38a223a0e7afb2637876f:104809)

Anyone has any idea how to successfully connect two components with reactive input ? I spent more than 3 days to resolve this issue but unable to do it. Please help me :frowning:

2

@Urigo Please help me :frowning: I cant pass any data into child component. Even setters and getters not working on child component initialization. Only constructor runs and it gives the error I posted when constructor finishes running. ngOnChanges or any other lifecycle hooks not working :frowning: