title: How to speed up the page render and operations of a dynamic HTML element (use ngFor and ngSwitchCase)
body: <h3>Problem:</h3>
  
  <p>I have a two-layer <code>ngFor</code> Angular template. Inside the <code>ngFor</code>, I use lots of <code>ngSwitchCase</code> to choose what kind of HTML element which I want to show dynamically. </p>
  
  <p>This page is successful showing what I want but the render speed and operations of this page are a little slow in Chrome, not fast but accepted (But in IE11, it's too slow to use....) </p>
  
  <h3>Here is the template:</h3>
  
  <pre><code>&lt;form #qaForm="ngForm"&gt;
  
          &lt;div *ngFor="let qa of qaList;let qIndex= index"&gt;
  
              &lt;div *ngIf="!qa.hide"&gt;
  
                  &lt;div class="card-header bg-info text-white h5"&gt;
                      &lt;label&gt;{{'Q' + (qIndex+1) + '.'}}{{qa.question.questionContent}}&lt;/label&gt;
                  &lt;/div&gt;
  
                  &lt;br&gt;
  
                  &lt;div [ngStyle]="caseQuestionsService.getStyle(ans)" *ngFor="let ans of qa.answers;let aIndex= index"
                      [ngSwitch]="ans.dataType"&gt;
  
                      &lt;div *ngIf="!ans.hide"&gt;
                          &lt;div *ngIf="isDependPage"&gt;
                              &lt;h6&gt;&lt;span class="badge badge-secondary"&gt;{{(qIndex+1) + '-' + (aIndex+1)}}&lt;/span&gt;&lt;/h6&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'displayfield'" class = "form-inline"&gt;
                              &lt;label class="ma mr-1 ml-1"&gt;{{ans.answerContent}}&lt;/label&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'newline'"&gt;
                              &lt;br&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'textfield'"&gt;
                              &lt;input type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns"
                                  (change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel" required&gt;
  
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'numberfield'"&gt;
                              &lt;input type="number" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}"
                                  [(ngModel)]="ans.typedAns" (change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel"
                                  required&gt;
  
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'textareafield'"&gt;
  
                              &lt;textarea type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}"
                                  [(ngModel)]="ans.typedAns" (change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel"
                                  required&gt;&lt;/textarea&gt;
  
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'singlecombobox'"&gt;
                              &lt;select type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns"
                                  (change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel" required&gt;
                                  &lt;option [ngValue]="null"&gt;select&lt;/option&gt;
                                  &lt;option *ngFor="let item of ans.answerContentAry" [ngValue]="item.value"&gt;{{
                                      item.text
                                      }}&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'singlecomboboxu'"&gt;
                              &lt;!--editable single selects--&gt;
                              &lt;app-input-select class="form-control" [selectAry]="ans.answerContentStringAry" name="q-{{qIndex}}-answers-{{aIndex}}"
                                  (click)="hideQAByIdx(qIndex, aIndex, ans.typedAns)" (change)="hideQAByIdx(qIndex, aIndex, ans.typedAns)" [(ngModel)]="ans.typedAns"
                                  #answers="ngModel" required&gt;&lt;/app-input-select&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'multicombobox'"&gt;
                              &lt;div class="row col"&gt;
                                  &lt;ng-multiselect-dropdown class="col-12" [placeholder]="'select'" [settings]="dropdownSettings"
                                      [data]="ans.answerContentAry" (onSelect)="hideQAByIdx(qIndex, aIndex, answers)"
                                      (onSelectAll)="hideQAByIdx(qIndex, aIndex, answers)" (onDeSelect)="hideQAByIdx(qIndex, aIndex, answers)"
                                      name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns" #answers="ngModel"
                                      required&gt;&lt;/ng-multiselect-dropdown&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'datePicker'"&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;input type="text" class="form-control col-9" ngbDatepicker #dpEnd="ngbDatepicker" name="q-{{qIndex}}-answers-{{aIndex}}"
                                      (ngModelChange)="hideQAByIdx(qIndex, aIndex, answers)" [(ngModel)]="ans.typedAns"
                                      #answers="ngModel" required&gt;
                                  &lt;div class="input-group-append"&gt;
                                      &lt;button type="button" class="btn btn-outline-secondary" tabindex="-1" (click)="dpEnd.toggle()"&gt;
                                          &lt;i class="fas fa-calendar-alt"&gt;&lt;/i&gt;
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'dateTimePicker'"&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;input type="text" class="form-control col-9" appDateTimePicker #dpEnd="appDateTimePicker"
                                      (ngModelChange)="hideQAByIdx(qIndex, aIndex, answers)" name="q-{{qIndex}}-answers-{{aIndex}}"
                                      [(ngModel)]="ans.typedAns" #answers="ngModel" required&gt;
                                  &lt;div class="input-group-append"&gt;
                                      &lt;button class="btn btn-outline-secondary" type="button" tabindex="-1" (click)="dpEnd.toggle()"&gt;
                                          &lt;i class="fas fa-calendar-alt"&gt;&lt;/i&gt;
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div *ngSwitchCase="'customization'"&gt;
                              &lt;input type="text" class="form-control" name="q-{{qIndex}}-answers-{{aIndex}}" [(ngModel)]="ans.typedAns"
                                  (change)="hideQAByIdx(qIndex, aIndex, answers)" #answers="ngModel" required&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>getStyle(ans)</strong></p>
  
  <pre><code>    public getStyle(ans) {
          let display = '';
          let width = '';
          if (
              ans.dataType !== 'newline' &amp;&amp;
              ans.dataType !== 'textareafield' &amp;&amp;
              ans.dataType !== 'multicombobox'
          ) {
              width = 'fit-content';
              display = 'inline-block';
          }
  
          return { display: display, width: width };
      }
  </code></pre>
  
  <h3>I'm thinking ...</h3>
  
  <p>I'm thinking of two ways to improve the speed of this page, but I am not sure about them.</p>
  
  <ol>
  <li><p>Changing to use <code>ComponentFactoryResolver</code> to generate component dynamically. (I'm not sure about that's would be fast or not)</p></li>
  <li><p>Generating a composed static HTML in Typescript then load them into Angular template? (I'm not sure about the detailed implementation)</p></li>
  </ol>
  
  <p>Would anyone give me some suggestions on these two ways or <strong>a new suggestion</strong>?</p>
  
  <p>Thanks for your help, Thanks.</p>