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 !
Top comments (0)