{"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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1212"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1212\/revisions"}],"predecessor-version":[{"id":1219,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1212\/revisions\/1219"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}