remove redundance HTML in Angular-CodePudding

I use ngSwitchCase for 3 cases, which inside every case I used the same part code, which I don't want. How could I remove this redundancy?

The redundancy code is inside "app-device"

<div
    *ngSwitchCase="case1"
  >
    <div>
      <div >
        <ng-container>
          <i>Icon 1</i>
        </ng-container>
      </div>
      <div>
        <app-device
          *ngIf="status"
          [statusInformation]="status"
        ></app-device>
        <app-device
          *ngIf="information"
          [statusInformation]="information"
        ></app-device>
      </div>
    </div>
  </div>

CodePudding user response：

Try it like this

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>

<div  style="width: 200px;">
  <select  appAppHighLight>
    <option>One</option>
    <option>One</option>
    <option>One</option>
    <option>One</option>
  </select>
</div>

<div [ngSwitch]="switch_expression">
  <div *ngSwitchCase="1">
    <p>Case 1</p>
    <ng-container *ngTemplateOutlet="defaultModalHeaderTemplate"></ng-container>
  </div>
  <div *ngSwitchCase="2">
    <p>Case 2</p>
    <ng-container *ngTemplateOutlet="defaultModalHeaderTemplate"></ng-container>
  </div>
  <div *ngSwitchDefault>
    <p>Default case</p>
    <ng-container *ngTemplateOutlet="defaultModalHeaderTemplate"></ng-container>
  </div>
</div>

<ng-template #defaultModalHeaderTemplate>
  <hello name="Test 123"></hello>
  <hello name="Test 321"></hello>
</ng-template>

working example is here