{"id":1212,"date":"2023-07-20T05:00:00","date_gmt":"2023-07-20T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1212"},"modified":"2023-07-19T12:27:55","modified_gmt":"2023-07-19T19:27:55","slug":"what-is-ng-container","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/what-is-ng-container\/","title":{"rendered":"What is ng-container?"},"content":{"rendered":"\n

Yesterday, we covered ng-template<\/a><\/code> and touched on different scenarios when it makes sense to use ng-template<\/code>. Let’s now introduce a close relative of ng-template<\/code> called ng-container<\/a><\/code>.<\/p>\n\n\n\n

There are a lot of similarities between those two elements, which can both be used to use structural directives such as ngIf or ngFor, with the bonus that ng-container can be used with the shorthand syntax of those directives:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

One thing you probably noticed as an Angular developer is that we can’t use two structural directives on the same element:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

In this scenario, using ng-container<\/code> is the perfect way to use both directives without adding any HTML to the DOM, as ng-container<\/code>, just like ng-template<\/code>, doesn’t create new DOM elements:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Another use for ng-container<\/code> is to become the host of a ng-template<\/code>, similar to the way that a router-outlet<\/code> is the host of routed components:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Such templates can be passed from a parent component using @Input<\/code> and let the child component decide when to display which template, which is very powerful:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can find a complete code example of such a feature in this Stackblitz<\/a> and a more in-depth tutorial here if you want to try it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we covered ng-template and touched on different scenarios when it makes sense to use ng-template. Let’s now introduce a close relative of ng-template called ng-container. There are a lot of similarities between those two elements, which can both be used to use structural directives such as ngIf or ngFor, with the bonus that ng-container […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,8],"tags":[],"class_list":["post-1212","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-components"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t