title: Dynamically choose components without string of *ngIf in Angular 4+
body: <p>In my current project, we have a need for a scalable solution which will allow us to choose between multiple concrete component implementations based on server-side configuration. Without going into too much business detail, we might have multiple registration forms (RegistrationComponentA, RegistrationComponentB, RegistrationComponentC). The client is told by the server which implementation we should use.</p>
  
  <p>At the moment our code might look something like this:</p>
  
  <pre><code>&lt;registration-a [someProp]="serverValue" *ngIf="serverSays == 'a'"&gt;&lt;/registration-a&gt;
  &lt;registration-b [someProp]="serverValue" *ngIf="serverSays == 'b'"&gt;&lt;/registration-b&gt;
  &lt;registration-c [someProp]="serverValue" *ngIf="serverSays == 'c'"&gt;&lt;/registration-c&gt;
  </code></pre>
  
  <p>Eventually, we may have 100 concrete implementations, and we want to do something more generic to avoid a template with 100 lines of *ngIf.</p>
  
  <p>I would like to do something where I can just choose which component to render in the parent component itself, but from what I've been reading, using things like ComponentFactory solutions mess with change detection and require manual cleanup on destruction.</p>
  
  <p>In AngularJS, I could manipulate the template and compile it on the fly and it would work fine, <strike>but with AoT, there is no compiler in the browser</strike>. (Thanks estus for pointing out that this was incorrect). </p>
  
  <p>Is there an elegant way to handle this without having to manually handle change detection and lifecycle?</p>