title: Refactoring large (ng)Switch statements
body: <p>In my angular (2) application I have contacts which have a list of properties (fields). Each property has its own type like Date, Gender, String, Int etc.</p>
  
  <p>In the editor for contacts I render specific form elements according to the type of the field. Date picker for date, radio groups for gender etc.</p>
  
  <p>To do this I now have a (rather large) switch statement on the type of the field where each case is a specific form element/component.</p>
  
  <pre><code>&lt;ng-container [formGroup]="formGroup" [ngSwitch]="field.fieldType"&gt;
    &lt;sp-contact-field-checkbox-list *ngSwitchCase="ContactFieldType.SET" [formControlName]="formControlName" [options]="field.options"&gt;&lt;/sp-contact-field-checkbox-list&gt;
    &lt;div *ngSwitchCase="ContactFieldType.GENDER"&gt;
      &lt;sp-gender-input [id]="formControlName" [formControlName]="formControlName"&gt;&lt;/sp-gender-input&gt;
    &lt;/div&gt;
  ...
  </code></pre>
  
  <p>In another component I show a details view of the contact. There I have a similar switch case so each of the property values is rendered correctly.</p>
  
  <p>I feel like having these large switch statements in the HTML might be a anti pattern or bad design. Adding/changing property types needs to be done in multiple files.</p>
  
  <p>Does anyone have a nicer (angular) solution to this problem? It feels like there should be a polymorphic solution but I can't do it in angular.</p>