ng-container and ng-template, both are angular elements which will work like containers with HTML elements, but with different purpose/use cases.
Lets see what is the use of ng-container and ng-template below:
In some cases when you do not want to add an extra HTML element to the DOM , for example like div or span , but we need a wrapper around children components, in that case we can use ng-container. It will accept Angular directives like ngIf, ngFor etc. ng-container will serve as wrappers but do not add any extra element to the DOM.
In Angular you cannot apply two or more structural directives( such as ngIf, ngFor, ngSwitch etc) on an element. So the next solution may be:
This will work, but now we are introducing a div element, which we don’t need.
In such cases, We can solve this using ng-container like below:
With this, the DOM won’t include ng-container, so we are not adding any extra element that we do not need. Angular renders the ng-container element as a comment in the DOM. Like this we can use another structural directive before the ul element. We can use more ng-containers
ng-template is a template that defines composition of elements(template content) . But Angular does not render it by default until we specifically render it.
When we check the above example in browser, in HTML source code , we will find ng-template block will be commented like below:
From this we can understand that it’s only defined in the source code but it is not rendered.
So the use case will be like:
So we have to render it to the DOM when there are no apps like below:
The template will never be rendered until we render it.
So ng-template is, We can store a piece of UI code using template element and apply it to the DOM conditionally.
Conclusion: Difference between ng-container and ng-template:
ng-container will serve as a container for elements, It will accept structural directives like ngFor, ngIf etc. But it will never get rendered to the DOM. Meanwhile ng-template allows us to create template content, this also will not render to the DOM until we specifically/conditionally add it to the DOM.