[Fixed] How do I implement directive (ng-template) in Angular?

Issue

In my HTML file, I’ve duplicated the "elseBlock2". How do I implement directive (ng-template) to handle it?

<div class="col-2">
   <ng-container *ngIf="item.isSuccess; else elseBlock2">
      {{getSimplifiedSize(item.file.size)}}
   </ng-container>
   <ng-container *ngIf="item.progress; else elseBlock2">
      {{item.progress}}%
      <mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
   </ng-container>
</div>

Solution

Can work something like this?

<div class="col-2">
  <ng-container *ngIf="(item.isSuccess || item.progress); else elseBlock2">
    <ng-container *ngIf="item.isSuccess">
      {{getSimplifiedSize(item.file.size)}}
    </ng-container>
    <ng-container *ngIf="item.progress">
      {{item.progress}}%
      <mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
    </ng-container>
  </ng-container>
  <ng-template #elseBlock2>
    Your content
  </ng-template>
</div>

Update:

If you want to display the elseBlock only when it’s both not in progress and success you can do something like this:

<div class="col-2">
    <ng-container *ngIf="item.isSuccess">
        {{getSimplifiedSize(item.file.size)}}
    </ng-container>
    <ng-container *ngIf="item.progress">
        {{item.progress}}%
        <mat-progress-bar mode="determinate" color="primary" value={{item.progress}}></mat-progress-bar>
    </ng-container>
    <ng-container *ngIf="!item.progress && !item.isSuccess">
        Your content
    </ng-container>
</div>