title: How to dynamically create component instance with input/output from a service and inject it to DOM separately?
body: <p>In creating dynamic components in Angular 2, I <a href="https://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468">found</a> <a href="https://www.lucidchart.com/techblog/2016/07/19/building-angular-2-components-on-the-fly-a-dialog-box-example/" rel="nofollow noreferrer">out</a> that this process requires <code>ViewContainerRef</code> in order to add newly created component to DOM.</p>
  <p>And in passing <code>@Input</code> and <code>@Output</code>to those dynamically created components, I found the answer in the second link above and <a href="https://codedump.io/share/kQakwDKNu0iG/1/passing-input-while-creating-angular-2-component-dynamically-using-componentresolver" rel="nofollow noreferrer">here</a>.</p>
  <p>However, if I were to create a service named <code>shape.service</code> that contains functions returning different shape components with some <code>@Input</code> like <code>bgColor</code>, I don't know how this service will create a component without specifying DOM location, and how the container-component receives this returned component (probably its type will be <code>ComponentRef</code>) from the service and injects it to the DOM container-component specifies.</p>
  <p>For example, a service contains a method:</p>
  <pre><code>getCircle(bgColor:string): ComponentRef&lt;Circle&gt; {
      let circleFactory = componentFactoryResolver.resolveComponentFactory(CircleComponent);
      let circleCompRef = this.viewContainerRef.createComponent(circleFactory);
      circleCompRef.instance.bgColor = bgColor;
  
      return circleCompRef;
  }
  </code></pre>
  <p>First question rises here, how do I make <code>this.viewContainerRef</code> point to no where for the meantime? The reason why I'm importing <code>ViewContainerRef</code> is to create component dynamically.</p>
  <p>Second question is after container-component receives input-specific<code>componentRef</code> from the service, how will it inject to its DOM?</p>
  <p><strong>UPDATE:</strong>
  I think my question above wasn't specific enough. I'm in a situation where:</p>
  <ol>
  <li>A parent component calls the service and gets the componentRef/s,</li>
  <li>Creates an object including componentRef/s together with some other data and stores those created object/s into array</li>
  <li>Passes it to its children as <code>@Input</code>,</li>
  <li>And let each child inject componentRef to its DOM and use rest of the data in the object in other way.</li>
  </ol>
  <p>That means the service calling component has no idea where those componentRef will get injected. In short, I need independent component objects that can be injected to anywhere, anytime I want.</p>
  <p>I'm reading the rumTimeCompiler solution several times already but I don't really get how that really works. It seems like there's too much work compared to component creation using viewContainerRef. I'll dig into that more if I find no other solution...</p>