angular ng-template directive | ng-template
Introduction:
Angular ng-template is a powerful directive that allows you to create dynamic content for your Angular applications. It is a structural directive that provides a placeholder, You can use ng-template with other structural directives, such as ngSwitch and ngIf. This angular ng-template content is not rendering itself, it will be conditionally rendered or repeated based on your application's logic.
What is ng-template?
In angular ng-template is a powerful one of the directive that is called “ng-template”. You should use the “ng-template” tag instead of “template”.
angular ng-template is an Angular element for rendering not it self. It is never displayed directly. In fact it will be conditionally rendered as your demands,
Angular ng-template example :
In this example, we see that ngTemplate.componenet.html file. we use *ngIf directive for condition to check if it`s true or false, it's true then we display message of interpolation {{ }} and else condition false ng-template message can be displayed.
when we create <ng-template> massage, they can render #notLogged to your own directive.
ngTemplate.componenet.html file.
angular ng-template ngif :
<div class="row">
<div class="col-4">
<div class="bg-primary p-3" *ngIf="isloggedIn; else notLogged" >
{{LoggedUser}}
</div>
</div>
<ng-template #notLogged>
<div class="bg-primary p-3">
<span>User not notLogged</span>
</div>
</ng-template>
</div>
ngTemplate.componenet.ts file.
isloggedIn:boolean = false;
LoggedUser:string = "Angular_Think"
Output:
--> In this isLogged condition is false that the region <ng-template> rendering #notLogged in else condition output show is
" User not notLogged "
Example :
ngTemplate.componenet.html file
<div class="col-4">
<ng-template #DynamicTemp1>
<p> It is DynamicTemp1</p>
</ng-template>
<ng-template #DynamicTemp2>
<p> It is DynamicTemp2</p>
</ng-template>
<ng-template #DynamicTemp3>
<p> It is DynamicTemp3</p>
</ng-template>
<div class="col-4">
<div #DynamicContainer>
</div>
</div>
</div>
<div class="col-4">
<button class="btn btn-primary" (click)="LoadTemplate()">Load Template</button>
</div>
ngTemplate.componenet.ts file
@ViewChild('DynamicTemp1')DynamicTemp1:TemplateRef<any>|undefined;
@ViewChild('DynamicContainer',{ read:ViewContainerRef })DynamicContainer:ViewContainerRef | undefined;
LoadTemplate() {
if(this.DynamicTemp1){
this.DynamicContainer?.createEmbeddedView(this.DynamicTemp1)
}
}
Output:
When we click button "Load Template" display massage
"It is DynamicTemp1"
Here are some additional tips for using ng-template:
- You can use multiple ng-template directives in a same component.
- You can pass data to ng-template using the let keyword.
- You can use ng-template with other structural directives, such as ngSwitch and ngIf.
Conclusion:
In this article we learn about angular ng-template is a powerful tool that can be used to create dynamic content in your Angular applications.
By using angular ng-template, you can improve the organization, flexibility, and performance in your project.
FAQ:
1>When to use ng template and ng container?
Ans-ng-template is used to create dynamic content that can be conditionally rendered or repeated. ng-container is used to group elements without introducing an extra element into the DOM. Use angular ng-template for dynamic content and ng-container for grouping without adding elements.
2>What are the directives in Angular template?
Ans-Directives in Angular templates are special elements that modify the behavior of HTML elements. They provide additional functionality, such as data binding, conditional rendering, and event handling. Examples include ngIf, ngFor, ngModel, and ngClick read more
3>How do I call a ng-template?
Ans-To call an ng-template in Angular, you use the ngIf, ngFor, or other structural directives. These directives provide conditions or loops that determine when the angular ng-template content should be rendered. For example, ngIf="condition" will render the template if the condition is true.
Read more:
0 Comments