Angular2: Creating instance of Component without injecting it
<p><strong>The question</strong></p>

<p>Is there a way in Angular2 to create an instance of a Component without actually injecting it? The Components are inserted into a view using ViewContainerRef.insert() or similar somewhere else.</p>

<p>I know there is the DynamicComponentLoader, but it needs a ViewContainerRef to attach instances which it creates by itself. The view does not even exist at that time.</p>

<p>Problem is, i want to create instances of views, configure them (even through custom factories) and add them to any view at some other point.</p>

<p>There is the ViewContainerRef, which is able to insert a ViewRef at an arbitrairy index which is nice so far, but how do i create a ViewRef from a Component which i created without actually inserting it somewhere?</p>

<p>I hope you get my question :P</p>

<p><strong>Update:</strong></p>

<p>An example application would be a carousel like navigation through forms. The views should get created and only the view with the current index should be loaded with the state it had before.</p>

<p>Here is an unfinished example which contains some TODOs marking the key positions (see loadViews() and showView() to get the idea).</p>

<pre><code>import {Component, ViewChild, ViewContainerRef, AfterViewInit} from '@angular/core'

export interface Storable {
  save(transaction: any): void; //transaction is usually a defined type, but this would go too far for this example
}

@Component({
  selector: 'user-form',
  template: `&lt;div&gt;
   User name: &lt;input type="text" [(ngModel)]="uname" /&gt;&lt;br /&gt;
   Password: &lt;input type="password" [(ngModel)]="passwd" /&gt;
  &lt;/div&gt;`
})
export class UserForm implements Storable {
  public uname: string = null;
  public passwd: string = null;

  constructor() {

  }

  public save(transaction: any): void {
    //save this.uname via transaction (not important for this example)
    //save this.passwd via transaction (not important for this example)
  }
}

@Component({
  selector: 'address-form',
  template: `&lt;div&gt;
   Street: &lt;input type="text" [(ngModel)]="street" /&gt;&lt;br /&gt;
   City: &lt;input type="password" [(ngModel)]="city" /&gt;&lt;br /&gt;
   Postal Code: &lt;input type="password" [(ngModel)]="postalCode" /&gt;
  &lt;/div&gt;`
})
export class AddressForm implements Storable {
  public street: string = null;
  public city: string = null;
  public postalCode: string = null;

  constructor() {

  }

  public save(transaction: any): void {
    //save this.street via transaction (not important for this example)
    //save this.city via transaction (not important for this example)
    //save this.postalCode via transaction (not important for this example)
  }
}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    &lt;div&gt;
      &lt;h2&gt;Carousel/Wizzard like state maintaining navigation&lt;/h2&gt;
      &lt;table style="width: 100%"&gt;
        &lt;tr&gt;
          &lt;td style="text-align: left"&gt;&lt;button (click)="prevBtnClick()"&gt;&amp;lt; Back&lt;/button&gt;&lt;/td&gt;
          &lt;td style="text-align: right"&gt;&lt;button (click)="nextBtnClick()"&gt;Next &amp;gt;&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td colspan="2" style="text-align: center" #content&gt;
            &lt;!-- here goes the content --&gt;
            &lt;p *ngIf="ci &lt; 0"&gt;No content loaded&lt;/p&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  `,
  directives: []
})
export class App implements AfterViewInit {
  @ViewChild('content', {read: ViewContainerRef}) content: ViewContainerRef;

  private ci = -1;
  private views = [];

  constructor() {
    this.loadViews();

    if(this.views.length &gt; 0) {
      this.ci = 0;
    }
  }

  public ngAfterViewInit(): void {
    this.showView(this.ci);
  }

  //THIS IS THE KEY PART Nr. 1
  public loadViews(): void { //this is simplyfied, in my case this is happening via a config loader which returns an array of "INITIALIZED" views
    //i know that this does not work! It is just to get the idea:
    var v = new UserForm();
    v.uname = "Some initialized value";
    v.passwd = "Usually loaded by another instance";
    this.views.push(v);

    v = new AddressForm();
    v.street = "Examplestreet 15";
    v.city = "Exampletown";
    v.postalCode = "12345";
    this.views.push(v);
  }

  protected prevBtnClick(): void {
    if(this.ci &lt; 0)
      return;

    this.ci++;

    if(this.ci &gt;= this.views.length)
      this.ci = 0;

    this.showView(this.ci);
  }

  protected nextBtnClick(): void {
    if(this.ci &lt; 0)
      return;

    this.ci--;

    if(this.ci &lt; 0)
      this.ci = this.views.length - 1;

    this.showView(this.ci);
  }

  //THIS IS THE KEY PART Nr. 2
  public showView(index: number): void {
    if(index &lt; 0 || index &gt;= this.views.length || !this.views || this.views.length == 0)
      return;

    this.ci = index;

    var view = this.views[index];

    //TODO: remove the currently loaded view from this.content
    //TODO: load the view instance in this.content without creating a new instance
    //      because the state of the instance must be maintained!!
  }

  //not important for this example
  public save(transaction: any): void {
    for(var v of this.views)
      (&lt;Storable&gt;&lt;any&gt;v).save(transaction);
  }
}
</code></pre>

<p><a href="https://plnkr.co/edit/JVFnT6QjGaQm3CKNNjSC?p=info" rel="nofollow">In Plunkr</a>: Feel free to update the example</p>