title: Angular2 (click) load dynamically the component view
body: <p>I've created on click to load a dynamically a component view, but I have each click as separate. I would like to have function, that I pass via the function a string than input that string in my function to load the view.</p>
  
  <p>Here is a working plunker
  <a href="http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/ZXsIWykqKZi5r75VMtw2?p=preview</a></p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Lets dynamically create some components!&lt;/h2&gt;
        &lt;button (click)="createHelloWorldComponent()"&gt;Create Hello World&lt;/button&gt;
        &lt;button (click)="createWorldHelloComponent()"&gt;Create World Hello&lt;/button&gt;
        &lt;dynamic-component [componentData]="componentData"&gt;&lt;/dynamic-component&gt;
      &lt;/div&gt;
    `,
  })
  
  export class App {
    componentData = null;
  
    createHelloWorldComponent(){
  
      this.componentData = {
        component: HelloWorldComponent,
        inputs: {
          showNum: 9
        }
      };
    }
  
    createWorldHelloComponent(){
      this.componentData = {
        component: WorldHelloComponent,
        inputs: {
          showNum: 2
        }
      };
    }
  }
  </code></pre>
  
  <p>What would like to have is one function, and from the array define a variable that is passed in the (click) and that load the view.
  <strong>Here is a trying   plunker:</strong> <a href="http://plnkr.co/edit/HRKGhCCEfkOhNjXbr6C5?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/HRKGhCCEfkOhNjXbr6C5?p=preview</a></p>
  
  <pre><code>@Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Lets dynamically create some components!&lt;/h2&gt;
  
            &lt;li *ngFor="let item of myMenu"&gt;
  
                &lt;button (click)="loadView({{ item.viewname }})"&gt;{{ item.id }}&lt;/button&gt;
           &lt;/li&gt;
  
        &lt;dynamic-component [componentData]="componentData"&gt;&lt;/dynamic-component&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    componentData = null;
     myMenu = {};
        constructor() {
          this.myMenu = myMenu;
  
        }
  
    loadView(viewName){
  
      this.componentData = {
        component: viewName,
        inputs: {
          showNum: 9
        }
      };
    }
  
  
  }
  
  const myMenu = [
      {
       id: 1, 
      viewname: 'HelloWorldComponent'
      },
      {
       id: 2, 
       viewname: 'WorldHelloComponent'
  
      },
  
  
  ];
  </code></pre>