title: Resolve ActivatedRoute in Angular2 for Dynamic Component by ngComponentOutlet directive
body: <p>I want to create Dynamic Component by <a href="https://github.com/angular/angular/blob/master/modules/@angular/common/src/directives/ng_component_outlet.ts" rel="nofollow noreferrer">ngComponentOutlet</a> directive. 
  I have searched almost all of the web for an issue I am facing but could not find anything specific. </p>
  
  <p>Issue: <strong>How can I resolve Dependency of ActivatedRoute for the components to be created dynamically?</strong></p>
  
  <p>I know I can pass <strong>Injector</strong> to ngComponentOutlet as per examples given <a href="https://github.com/angular/angular/blob/8578682dcfccc2ccccb68df37c3ebc738f98bf0e/modules/%40angular/examples/common/ngComponentOutlet/ts/module.ts" rel="nofollow noreferrer">here</a></p>
  
  <p>But I need to pass dynamic ID or <strong>ActivatedRoute</strong> to component. I am not able to resolve <strong>ActivatedRoute</strong> , Here is a test case: </p>
  
  <p>My.component.ts: </p>
  
  <pre><code>import {Component, OnInit} from '@angular/core'
  import { MyService } from './my.service';
  import  {Test} from './test'
  import { Params,ActivatedRoute}   from '@angular/router';
  
  @Component({
    moduleId: module.id.toString(),
    selector: 'my-selector',
    templateUrl: './my.component.html'
  })
  
  export class MyComponent implements OnInit{
     public test: Test;
      constructor(private myservice: MyService,private route: ActivatedRoute
      ) { }
  
      ngOnInit() {
          this.route.params
          .subscribe((params: Params) =&gt;  {this.myservice.getTest(+params['id']).then(test =&gt; this.test = test)})
      }
  
  
  
  }
  </code></pre>
  
  <p>as you can see <strong>MyComponent</strong> need an <strong>ActivatedRoute</strong> and gets the <strong>ID</strong> from this route and load the corresponding <strong>Test</strong>.
  this works fine when I navigate to corresponding url but to create this component Dynamically I don't know how to resolve this <strong>ActivatedRoute</strong> so it gets the required data. </p>
  
  <p>P.S: I thought of passing <strong>ID</strong> as Input() to <strong>MyComponent</strong> but same issue occurs. How to pass Input values to <strong>ngComponentOutlet</strong> ?. </p>
  
  <p>I hope someone help me here</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>Here is components setup for this scenario </p>
  
  <p><strong>test.ts</strong></p>
  
  <pre><code>export class Test{
  id: number;
  name: string;
  rank: number;
  }
  </code></pre>
  
  <p><strong>my.component.html</strong></p>
  
  <pre><code>&lt;div *ngIf="test"&gt; 
  ID: {{test.id}}
  Name: {{test.name}}
  Rank: {{test.rank}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my dynamic component loader component which keeps record of all the dynamically loadable components.</p>
  
  <p><strong>list.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core'
  import  {MyComponent} from './my.component'
  import { Params,ActivatedRoute}   from '@angular/router';
  
  @export class ComponentWrapper{
    component: Component;
    id: number;
    other_data: Object;
    constructor(component: Component,id: number,other_data?: Object){
      this.component = component;
      this.id = id;
      this.other_data=other_data;
    }
  
  }
  
  @Component({
    selector: 'app-list',
    templateUrl: './list.component.html'
  })
  
  export class ListComponent{
     public component_list: ComponentWrapper[];
     public some_ids = [1,2,3,4,5,6,7,8,9,10];
      constructor(private myservice: MyService,private route: ActivatedRoute
      ) { }
  
  
    addMyComponent(id: number,other_data?: Object)
      this.component_list.push(new ComponentWrapper(MyComponent,id,other_data));
    }
  </code></pre>
  
  <p><strong>list.component.html</strong></p>
  
  <pre><code>&lt;div *ngFor="let c_id of some_ids"  (click)="addMyComponent(c_id)" &gt;
  Component ID: {{c_id}}
  &lt;/div&gt;
  
  
  &lt;div *ngFor="let wrapper of component_list"&gt;
  
  &lt;ng-container *ngComponentOutlet="wrapper.component"&gt;&lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see. I want to load <code>MyComponent</code> dynamically. This component get's the ID from ActivatedRoute and load <code>Test</code> from service and shows it's name,id and rank. (This will work fine when some one comes from URL, as router will provider it the <code>ActivatedRoute</code> with the corresponding ID)</p>
  
  <p>But when some one clicks on any of the <code>list</code> item. I want clicked component(ID) to be loaded dynamically with <code>ngComponentOutlet</code>. 
  But currently <code>MyComponent</code> will not get the required routing information and will fail to load <code>Test</code> with clicked ID.</p>
  
  <p>P.S it's a simple demonstrative setup. In real case there will be plenty of Components of different type in <code>listComponent</code> </p>