Can be used when we required Multiple Structural directives

TechnoFunnel presents another article to learn and understand use cases for “ng-container”. “ng-container” can be used at multiple places and can resolve multiple issues. Lets look for the use case scenarios when “ng-container” would be very useful while development.

https://connect.isa.org/network/members/profile?UserKey=b0d8b9ce-e93e-496b-a2f2-32a25bb2d970

https://connect.isa.org/network/members/profile?UserKey=8a6d2b22-f7b8-407c-b6ea-6d6218183534

https://connect.isa.org/network/members/profile?UserKey=d6b72163-ec82-4614-b825-09ea6112bcca

https://connect.isa.org/network/members/profile?UserKey=490db302-6a51-4aa6-b354-71d823f1ccf0

https://connect.isa.org/network/members/profile?UserKey=9977bfc1-f9c0-4354-aa43-6cdfe4a39064

https://connect.isa.org/network/members/profile?UserKey=d8ff2144-3480-4285-9199-f8fdebeeff38

https://connect.isa.org/network/members/profile?UserKey=c8798184-84af-4344-8243-9935ecd2179d

https://connect.isa.org/network/members/profile?UserKey=0c70cbe0-1e5b-4e8b-8425-4b798c4def17

https://connect.isa.org/network/members/profile?UserKey=5311cec5-ce2d-4090-80e2-cf6fa400f27c

https://connect.isa.org/network/members/profile?UserKey=8fc78305-ab6c-4d83-b6fc-de551954718c

https://connect.isa.org/network/members/profile?UserKey=56da644e-8452-444a-a328-552f61b67cba

https://connect.isa.org/network/members/profile?UserKey=87b50956-ad3d-4861-9b4f-3fef1d1fa6e7

Angular ng-container, Techno Funnel, Angular Interview, Angular ng-template

What is Ng-container in Angular?

“ng-container” is a logical container which can contain multiple elements within it. ng-container is not rendered on the screen as an element, instead it is displaced as a comment in HTML. We can group components within ng-container, since it is not rendered as a HTML tag, it do not interface with styles and layout of the component. It acts as a dummy component acting as a parent for other components.

 

In the output above, we can see that there is no container that is rendered for H1 and H2 Tag. Instead we can see a comment “ng-container”.
What is the purpose of Ng-container in angular?
“ng-container” can be used for the following scenario:
It can act as a container for other elements which is not actually rendered on the screen. So it can be rendered as parent element for other others
We can use “ng-container”, where multiple Structural Directives are required. By design, Angular cannot have multiple structural directive on the same components. We can do the same with “ng-container”
“ng-container” can be used to display conditional templates. We can select template to be displayed on the basis of certain conditions.
Using “ng-container” as a Parent Element
As the name suggest, “ng-container” can be used as a container element to enclose other elements. It acts as the parent which is itself not displayed on the screen then the application is rendered.

The example given above shows that the “ng-container” can be used as a parent element for other element without being rendered.
Can be used when we required Multiple Structural directives
We can use “ng-container” to cater scenario where we require multiple structural directives. In the code below, we have “*ngIf” and “*ngFor” in the same element. The scenario, will throw error since we cannot have multiple structural directive in same element.

The error for the following is specified below:

In order to resolve the same, we can have “ng-container”, where we can put down one of the structural directive and the other structural directive can be placed on the element itself. This way we don’t have 2 structural directive on the same element.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0Shares