title: Angular 4 : If there are multiple components with same selector, how to load only one component based on some condition?
body: <p>Main component: </p>
  
  <pre><code>@Component({
      selector: 'app-root',
      template: '&lt;app-report&gt;&lt;/app-report&gt;'
  })
  </code></pre>
  
  <p>Component 1: </p>
  
  <pre><code>@Component({
      selector: 'app-report',
      templateUrl: './trip.report.html'
  })
  </code></pre>
  
  <p>Component2 : </p>
  
  <pre><code>@Component({
      selector: 'app-report',
      templateUrl: './user.report.html'
  })
  </code></pre>
  
  <p>Is there any way in angular 4, through which based on some condition which component (component 1 or 2) will be loaded in "main component" based on some condition?</p>