🚀 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>

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>

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 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!

Try Our new product for free!

DocsAI - Create AI support agents with your documents in the most affordable price, starts at 0$. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? Check out our pricing Just contact me for personalized pricing !

More Free Articles from me

How I Built a chrome extension that finds Ghost CSS : Ghost-CSS-Detector

Shrihari Mohan ・ Jan 11

#webdev #javascript #tutorial #css

Navbar with background blur! Aesthetic look in 2 lines of code .

Shrihari Mohan ・ Oct 29 '22

#webdev #javascript #html #programming

Why Array Index Starts with 0 , A pointers magic !

Shrihari Mohan ・ Oct 25 '22

#programming #c #beginners #tutorial