🚀 Angular ng-templates: Crafting Reusable templates with Ease

1. NgIf with else

This is a common scenario such as showing Loader where we will use ngIf="isLoading" and ngIf="!isLoading". Instead we can use the following syntax.

export class HomePageComponent {
  constructor() {}
  isLoading : boolean = false
}

<div *ngIf="isLoading else content">
  <h1> Loading ... </h1>
</div>

<ng-template #content>
  <h1> Hello there </h1>
</ng-template>

2. Reuse Static HTML

By creating a reference to the template we can then use that to reuse with the help of ng-container and ngTemplateOutlet.

<ng-template #staticContent>
  <h1> 
      This content can be used in this 
      component any number of times
  </h1>
</ng-template>

<ng-container *ngTemplateOutlet="staticContent"></ng-container>
<ng-container *ngTemplateOutlet="staticContent"></ng-container>
<ng-container *ngTemplateOutlet="staticContent"></ng-container>

Static Reusable Template

3. Resue Dynamic HTML With ng-template

ng-template also will take variables inside that and render dynamically.

export class HomePageComponent {
  constructor() {}
  
  user_1 = {
    id: 1,
    firstName: 'Walter',
    lastName: 'White'
  }
 
  user_2 = {
    id: 2,
    firstName: 'Jesse' 
  }
}

<ng-template #userTemplate let-user>
  <span *ngIf="user">First Name : {{user.firstName}}</span>
  <span *ngIf="user&& user.lastName"> Last Name : {{user.lastName}}</span>
</ng-template>

<ng-template 
*ngTemplateOutlet="userTemplate; context: {$implicit: user_1 }">
</ng-template>
<br>
<ng-template 
*ngTemplateOutlet="userTemplate; context: {$implicit: user_2 }">
</ng-template>

Dynamic Template

The context object’s keys will be available for binding by the local template let declarations (in this case let-user). Using the key $implicit in the context object will set its value as default.

We can also use the following syntax to assign it to variables without $implicit and you can use multiple let declarations in an ng-template by separating them with a comma. For example, if you have a component with properties user and address, you can use both in an ng-template like this

export class HomePageComponent {
  constructor() {}
  user = {
    id: 1,
    name: 'Walter',
    lastName: 'White'
  }

  address = {
    street: 'Bakers Street'
  }
}

<ng-template #myTemplate let-user="user" let-address="address">
  <p>{{ user.name }}</p>
  <p>{{ address.street }}</p>
</ng-template>

<ng-template 
 *ngTemplateOutlet="myTemplate; 
 context: {user : user , address : address }">
</ng-template>

Peace 🕊

Hey I just made an chrome extension that makes your css debugging easier. Try and give me suggestions to improve. Find Ghost Css

If you are here it means you may have enjoyed reading this blog. Just follow me Shrihari Mohan which will motivate to write more.

You can make a drink Buttermilk 🥛. Small support comes a long way!

Subscribe If you want to receive these blogs in your mail from @Medium for free!

OG Image