Is there any way I can pass dynamic data to a component in Angular?

Question

I am trying to pass data that is dynamic to a child component. But I always get the data as undefined in the child component. Below is what I am doing.

ParentComp

Answer 1

You might try OnChanges lifecycle hook method.

In your case, you would need to add it to your child component like so:

ngOnChanges(changes) {
  if (changes['dataNeeded'] && this.dataNeeded) {
    console.log(this.dataNeeded);
  }
}

PS Also I just noticed the wrong syntax in your ChildComponent.ts, it is missing this:

ngOnInit() {
 console.log(this.dataNeeded);
}

Answer 2

if you are sure that your service gets data successfully so this will work :

in the html of your parent component add the quotes :

<app-childComponent [dataNeeded]="results"></app-childComponent>

in your child component , you will check changes of your Inputusing the OnCh:

ngOnChanges(changes: SimpleChanges) {   
   for (let propName in changes) {
      // when your @Input value is changed  
      if(propName === "dataNeeded"){
          console.log(dataNeeded);
      }
   }
}

Hope this would help :)

Answer 3

Why not using the Observable with the async pipe. If you want to console-log that value use a setter. The async pipe will also take care about unsubscribing.

results: Observable<any[]>;
ngOnInit() {
  this.results = this.http.get('url');
}

In the HTML

<app-childComponent [dataNeeded]="results | async"></app-childComponent>

And in your child component

@Input('dataNeeded') 
set dataNeeded(val: any[]) {
  console.log(val);
}

Answer 4

The problem is that the UI thread will render the child component before the subscribe from the observable finished.

you need to do it like this:

import { ChangeDetectorRef } from '@angular/core';

constructor(private ref: ChangeDetectorRef) {}
ngOnInit() {
   this.http.get('url').subscribe(data => { 
     this.results = data;
     this.ref.markForCheck();
   });
}

and in the HTML you have to test the value first.

<ng-container *ngIf="results != null">
    <app-childComponent [dataNeeded]=results></app-childComponent>
</ng-container>

A little description, the .markForCheck() will refresh the result after the subscribe and will inform all the components which are using this "value" to update its value, including the ng-container. The container would allow rendering the child component now, which will guarantee that the results are not null when the child will be going through its life cycle.