angular (version 8) pass async @input value to fetch another call

Question

I have a parent component that has a button when the user clicks it will make a request and passed the data into a child component (a ngx-bootstrap modal). The child component will use the async data to make another request to render its UI.

My parent component is like this:

<Parent>
<child-modal [subSectionInfo]="subSectionInfo"></child-modal>
</Parent>

the subSectionInfo is async data retrieved from an ajax in Parent component.

My child component will make call like this:

  ngOnInit() {
   const id = this.subSectionInfo.id;
   this._fetchData(id)
  }

   private _fetchData(id: number) {
     this.service
     .getData(id).pipe(
     .subscribe((data: any) => {
      this.list = data;
   });
  }

However, this always gives me undefined which causes the child component ajax call failed. Is any way to solve this issue? Thank you so much in advance!

Qarun Qadir Bissoondial · Accepted Answer · 2020-06-03 03:21:07Z

1

Currently, your code does not wait on the first request to complete. While the request for subSectionInfo is being made in the parent component, it's value is undefined since the value hasn't returned from the server yet. This is why the child component get's undefined. There are 2 ways to approach this.

In your parent component, you can wait until the data is loaded and then pass in subSectionInfo to your child component.
In your child component, you can make use of the ngOnChanges life-cycle hook. This is where your child component implements OnChanges. You can read more about it here.

 ngOnChanges(changes: SimpleChanges) {
   if (changes['subSectionInfo'].currentValue !== undefined) {
      const id = this.subSectionInfo.id;
      this._fetchData(id)
   }

 }

  private _fetchData(id: number) {
    this.service
      .getData(id).pipe(
      .subscribe((data: any) => {
        this.list = data;
    });
  }

Hope this helps

answered Jun 3, 2020 at 3:21

Qarun Qadir Bissoondial

3252 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zichen Ma Over a year ago

Thank you so much! I took the first solution which works better than the second in my case!

Collectives™ on Stack Overflow

angular (version 8) pass async @input value to fetch another call

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related