Well, we have the likes of React functional component, which make it so easy to build re-usable UI pieces. The same also applies to Angular, thanks to Angular NgTemplate.

In this piece, we will see how to reuse Angular NgTemplate and compose Angular UI using NgTemplate context as the data into our re-usable UI piece.

Problem

Depending on the status of the user, we wanna show them as active, away, or offline.

Active will be green, away will be yellow, and offline will be grey. We also wanna show an optional text for each - Available, Away, or Offline.

Solution

HTML

<div class="wrapper">

 <h1>How To Use Angular Ng Template And Reuse UI Pieces</h1>

 <ng-container *ngIf="isOnline">

   <ng-template

     [ngTemplateOutlet]="statusTemplate"

     [ngTemplateOutletContext]="{

       data: { status: 'online', label: 'Online' }

     }"

   ></ng-template>

 </ng-container>

 <ng-container *ngIf="isAway">

   <ng-template

     [ngTemplateOutlet]="statusTemplate"

     [ngTemplateOutletContext]="{

       data: { status: 'away', label: 'Away' }

     }"

   ></ng-template>

 </ng-container>

 <ng-container *ngIf="isOffline">

   <ng-template

     [ngTemplateOutlet]="statusTemplate"

     [ngTemplateOutletContext]="{

       data: { status: 'offline', label: 'Offline' }

     }"

   ></ng-template>

 </ng-container>

</div>




<ng-template #statusTemplate let-data="data">

 <div class="status-wrapper--{{ data.status }}">

   <div class="status-wrapper--{{ data.status }}__indicator"></div>

   <div class="status-wrapper--{{ data.status }}__text">{{ data.label }}</div>

 </div>

</ng-template>

CSS

.wrapper {

 width: 500px;

 justify-content: center;

 align-items: center;

 display: flex;

 flex-direction: column;




 h1 {

   text-align: center;

 }

}




.status-wrapper {

 &--online,

 &--away,

 &--offline {

   font-size: 24px;

   margin-bottom: 24px;

   display: flex;

   column-gap: 12px;




   &__indicator {

     width: 20px;

     height: 20px;

     border-radius: 50%;

   }

 }




 &--online {

   $color: green;

   color: $color;

   &__indicator {

     background-color: $color;

   }

 }




 &--away {

   $color: rgb(206, 157, 22);

   color: $color;

   &__indicator {

     background-color: $color;

   }

 }




 &--offline {

   $color: #ddd;

   color: $color;

   &__indicator {

     background-color: $color;

   }

 }

}

Component

 public isOnline: boolean = true;

 public isAway: boolean = true;

 public isOffline: boolean = true;

Discussion

So, this is the most important piece of the puzzle.

<ng-template #statusTemplate let-data="data">

 <div class="status-wrapper--{{ data.status }}">

   <div class="status-wrapper--{{ data.status }}__indicator"></div>

   <div class="status-wrapper--{{ data.status }}__text">{{ data.label }}</div>

 </div>

</ng-template>

We are actually passing in data from the different UI sections like so:

   <ng-template

     [ngTemplateOutlet]="statusTemplate"

     [ngTemplateOutletContext]="{

       data: { status: 'online', label: 'Online' }

     }"

   ></ng-template>

This is somehow similar to how you can call a function, only in this case we reuse Angular NgTemplate by “calling” it instead with the parameters that we want to compose Angular UI.

The other important thing to remember is NgTemplate context, which we are passing for different states, and then we get to compose Angular UI, by telling Angular NgTemplat, what it needs to render, given a set of context information.

Conclusion

And that is it! With this, you can reuse Angular Template in ideally any logic you want! Try it out!

Until the next one, be good and always remember,

God loves you!