Did you come across ng-template when using *ngFor or *ngSwitch? Did you wonder how it works, and what’s the difference between ng-template and ng-containeror ngTemplateOutlet? This question is often asked in interview questions.

Those directives are very powerful and can help you write a clean code when you have advanced use cases, knowing them and when to use each will definitely change your way of coding templates in Angular.

Here is what I’m covering in this article:

• What is ng-template + use case
• What’s ng-container + use case
• What’s ngTemplateOutlet + use case
• Takeaways

Ready, let’s go

What is ng-template?

ng-template is an Angular element used to render HTML templates. That’s all? Well, Nah! the power of ng-templates is the fact that it’s a virtual element. It is displayed conditionally.

Here is a comparison to the classical HTML template?

• ng-templates is conditionally displayed and removed from the DOM.
• It can make the structure dynamic based on Angular directives.
• It can define its own set of variables.
• It can be accessed in the component class.

To do all of these things, we need to use Angular directives and elements designed for templates such as ng-template, ng-container, ngTemplateOutlet …etc.

Let’s start first by 

#typescript #web-development #html #front-end-development #angular