title: Angular2 replacing component dynamically inside another component
body: <p>I am trying to load a component in some other component which has its own view. The component that will be loading will be dynamic and based on some condition.</p>
  
  <p>What I mean is replacing another component at same place inside the parent component.</p>
  
  <p>For instance, In my AppComponent.html (below) I would like to load  components which can again be replaced by some other component with some events.</p>
  
  <blockquote>
    <p>AppComponent.html</p>
  </blockquote>
  
  <pre><code>&lt;button class="button1"&gt;Button1 &lt;/button&gt;
  &lt;button class="button2"&gt;Button2 &lt;/button&gt;
  &lt;placeHolder&gt;&lt;/placeHolder&gt;
  </code></pre>
  
  <blockquote>
    <p>AppComponent.ts</p>
  </blockquote>
  
  <pre><code>@Component({
      selector: '...',
      templateUrl: 'resources/app.component.html'
  })
  export class AppComponent{
       //on click of the button1, I want to load component c1, and on click of button2, I want to load component c2
  }
  </code></pre>
  
  <p>(c1 and c2 are just any other component)</p>
  
  <p>How to do this ? Any help is highly appreciated.</p>