Both ng-container and ng-template can be used to create responsive and dynamic components. Angular provides a set of structural directives that can be used with both ng-template and ng-container such as:
These structural directives are used to alter the structure of the DOM by conditionally rendering the HTML elements.
Both ng-container and ng-template render the wrapped elements while hiding themselves but they both follow different mechanisms, these difference will be shown in the following article.
ng-template: Let’s try an example:
Yes, nothing will be rendered. When we check the HTML code, we will see:
It is because ng-template does not do anything on its own. It needs some rendering logic to render something.
Let’s try another example:
This time output will be like this:
In both the example, we can see template comments itself out, rendering the wrapped content conditionally.
ng-container: The ‘ng-container’ indeed shares some similarities with ‘ng-template’, like they both render the wrapped content while omitting themselves. But ng-container, on the other hand, is used when we use multiple structural directives and have no suitable parent wrapper. It does not require a structural directive to render the child elements unlike ng-template were using a structural directive was necessary.
Let’s see an example:
Now in this case, HTML was rendered even without any structural directive:
Let’s see what will happen if we wrap a ng-template inside a ng-container:
ng-container successfully wraps a ng-template:
To conclude, we can say that both the ng-container and ng-template are used to wrap HTML elements. They differ in their mechanisms. Also, multiple structural directives are not possible inside ng-template but ng-container can be used to wrap multiple elements containing different structural directives so it is a perfect container.
- Difference between Bootstrap and AngularJS
- Difference between NodeJS and AngularJS
- Difference between Angular and AngularJS
- Difference between VueJS and AngularJS
- What's the difference between ng-pristine and ng-dirty in AngularJS?
- What is the Difference between Constructor and ngOnInit in AngularJS ?
- What is the difference between $watch and $observe in AngularJS ?
- Difference between declarations and entryComponents in AngularJS
- Difference between Directive and Component in AngularJS
- Difference between Template and TemplateURL in AngularJS
- How to share data between controllers in AngularJS ?
- How to set, get and clear cookies in AngularJs?
- AngularJS vs Angular2 | Features and Comparison
- How to iterate over the keys and values with ng-repeat in AngularJS ?
- Interesting Facts and Features about AngularJS
- AngularJS Interview Questions and Answers
- How to Set navbar active class with Bootstrap and AngularJS ?
- How to add Google map and Marker to your Application using AngularJS ?
- AngularJS and W3.CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.