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