title: Pass Observable data from Parent Component to a Child Component created with componentFactoryResolver in Angular 2+
body: <p>I need help as I am a bit lost right now. So, I have a component that dynamically injets a child component into its template using componentFactoryResolver , here is my HTML </p>
  
  <pre><code>&lt;div class="dialog"&gt;
      &lt;div #container&gt;&lt;/div&gt;
      &lt;button (click)="move('back')"&gt;Back&lt;/button&gt;
      &lt;button (click)="move('forwards')"&gt;Forwards&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>also in my component I have an observable that captures the click of the buttons like so, here is my (edited / reduced) code</p>
  
  <pre><code>// parent-component.ts
  
  @ViewChild('container', {read: ViewContainerRef})
  public dialogContainer: ViewContainerRef;
  
  public navigationClick$: Observable&lt;string&gt; = new Subject&lt;string&gt;();
  
  // click event on buttons
  public move(direction): void {
      this.navigationClick$.next(direction);
  }
  
  // code to inject child dynamic component, please ignore the args / variables
  
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.component);
  this.componentRef = this.dialogContainer.createComponent(componentFactory);
  this.embeddedcomponent = this.componentRef.instance as IWizardDialog;
  this.embeddedcomponent.data = this.data.data;
  </code></pre>
  
  <p>Now I would like to pass the latest observable value from navigationClick$  to the child component I amend the code in my parent component thus...</p>
  
  <pre><code>const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.component);
  this.componentRef = this.dialogContainer.createComponent(componentFactory);
  
  // NEW CODE
  // here I subscribe to the observable and try to pass the value to the child component
  this.navigationClick$.subscribe((data: string) =&gt; {
    this.componentRef.instance.direction = data;
  });
  
  this.embeddedcomponent = this.componentRef.instance as IWizardDialog;
  this.embeddedcomponent.data = this.data.data;
  </code></pre>
  
  <p>The subscribe is working in the parent as I would expect however I am unsure how I would capture / pass the subscribe data to the child component, for example can I just declare this as a <code>Input()</code></p>
  
  <pre><code>// child-component.ts
  
  @Input() public direction: string;
  </code></pre>
  
  <p>However this will just be undefined and isn't what I need. How do I pass the direction data from the subscribe to the child component or what code / feature do I need to receive the event / direction string?  Any advice is appreciated.</p>
  
  <p>If my wording is bad or confusing please say and I will rework the question.</p>