How to pass asynchronous data to child component? Angular

Question

I have a Parent Component where I make a http request, get Observable in return and subscribe to it :

this.bookingService.getBooking().subscribe((r) => {
  this.booking = r['result'];
});

I pass the booking variable to Child Component like this:

<child *ngIf="booking" [booking]="booking"></child>

In my child component I receive that variable and I use ngOnChanges to listen to changes on that variable. I need to use this variable immediately as the child component is loaded.

@Input() booking: Booking;

. . .

ngOnChanges(changes: SimpleChanges) {
if (changes['booking']) {
  this.createForm(this.booking.reference);
}}

I believe that that before the request is finished in Parent Component the booking variable is passed to child as undefined.

@@@@@@@@@@@@@@@@ EDIT @@@@@@@@@@@@@@@@@

Child component is a modal popup. In the Parent component I have a button that shows that modal(component) and after clicking that button, ngOnInit fires up in Child component , however ngOnChanges does not...

Parent-component.ts:

openUpdateReservationPopup() { this.modalRef = this.modalService.show(UpdateReservationComponent, { class: 'modal-dialog-centered' }); }

Parent-component.html:

<button class="btn btn-primary btn-sm" (click)="openUpdateReservationPopup()" *ngIf="showButton()"> <span class="booking-content-actions-label">Open popup</span> </button>

@@@@@@@@@@@@@ END OF EDIT @@@@@@@@@@@@@@@@

Nothing works so far. I have tried separating in the Parent Component the Observable and passing it to the child component (with async pipe and without it), and then subscribing ( inside ngOnInit() ) to that observable in the Child Component.

Parent-component.ts

this.bookingObservable$ = this.bookingService.getBooking();
this.bookingObservable$.subscribe((r) => {
  this.booking = r['result'];
});

Parent-component.html

<child *ngIf="booking" [bookingObservable$]="bookingObservable$ | async"></child>

as well as:

<child *ngIf="booking" [bookingObservable]="bookingObservable$ "></child>

Child-component.ts

@Input() bookingObservable$: any;

ngOnInit() {
this.bookingObservable$.subscribe((val) => {
  console.log(val);
  this.createReferenceNumberForm(val.reference);
});

}

Why don't you use `@Input() public set booking(value: Booking) { /* do something */ }`. You're just making it too complicated — Pieterjan, Oct 04 '22 at 16:40
Even if I not use ngOninit or ngOnChanges, and I type console.log("inside set") inside /*do smth*/ it doesn't display the message, it's not getting there — programmer24, Oct 04 '22 at 21:53
Please take a look at the EDIT in the question - the child component is a modal activated on click from the parent — programmer24, Oct 04 '22 at 22:19

score 2 · Answer 1 · answered Oct 04 '22 at 16:05

2

You only need this code in the parent :

<child *ngIf="booking" [booking]="booking"></child>

but in the child, change your your condition in ngOnChanges :

ngOnChanges(changes: SimpleChanges) {
 if (changes['booking']?.currentValue) {
 this.booking=changes['booking'].currentValue;
 this.createForm(this.booking.reference);
}}

answered Oct 04 '22 at 16:05

hasnaas

86
5

When I add `console.log("test")` before `if (changes['booking']?.currentValue)` it doesn't display *test* in console at all – programmer24 Oct 04 '22 at 21:54
Please take a look at the EDIT in the question - the child component is a modal activated on click from the parent – programmer24 Oct 04 '22 at 22:19
Ah, in this case you need to pass the input in the ts class of your parent (not in the template) , like this : this.modalRef.componentInstance.booking=this.booking – hasnaas Oct 05 '22 at 06:53

How to pass asynchronous data to child component? Angular

1 Answers1