title: Better way to swap the components in Angular 6
body: <p>In my Angular 6 app I've code something like this:</p>
  
  <pre><code>&lt;div *ngIf="someSettings === 'abc'"&gt;
  
        &lt;abc-container [prop1]="" [prop2]="" (ev1)="" (ev2)=""&gt;
        &lt;/abc-container&gt;
  
        &lt;xyz-container [prop1]="" [prop2]="" (ev1)="" (ev2)=""&gt;
        &lt;/xyz-container&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Now based on someSettings I want to swap these two components and therefore I would use another block of code e.g.:</p>
  
  <pre><code>&lt;div *ngIf="someSettings === 'xyz'"&gt;
  
        &lt;xyz-container [prop1]="" [prop2]="" (ev1)="" (ev2)=""&gt;
        &lt;/xyz-container&gt;
  
        &lt;abc-container [prop1]="" [prop2]="" (ev1)="" (ev2)=""&gt;
        &lt;/abc-container&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>but this is duplication e.g. If I've added or removed some property or event I've to change it at both locations, is there a better way of doing this?</p>