CODEWITHSUNDEEP
htmlangularjsangularng-template
PaulDickson
PaulDickson

Reputation: 69

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

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>

Upvotes: 0

Views: 151

Answers (2)

Pushkin
Pushkin

Reputation: 3604

You can use if then else with ternary operator to achieve else-if in Angular

<ng-container
  *ngIf="item.isSuccess then successBlock; else (item.progress) ? progressBlock : elseBlock"
></ng-container>

<ng-template #successBlock>
  {{ getSimplifiedSize(item.file.size) }}
</ng-template>

<ng-template #progressBlock>
  {{ item.progress }}%
</ng-template>

<ng-template #elseBlock>
  Error
</ng-template>

In else statement, instead of passing a template, do another conditional check with ternary operator and pass other two templates as values

Upvotes: 1

Francesco Lisandro
Francesco Lisandro

Reputation: 720

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>

Upvotes: 2

Related Questions