{"id":1647,"date":"2022-01-30T22:03:40","date_gmt":"2022-01-30T21:03:40","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1647"},"modified":"2022-01-30T22:03:40","modified_gmt":"2022-01-30T21:03:40","slug":"ng-template-vs-ng-container-vs-ng-content","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/01\/30\/ng-template-vs-ng-container-vs-ng-content\/","title":{"rendered":"“ng-template” VS “ng-container” VS “ng-“content"},"content":{"rendered":"\n

1 – <ng-template><\/ng-template><\/span><\/h4>\n\n\n\n

As the name suggests the <ng<\/strong>–template<\/strong>> is a\u00a0template<\/strong>\u00a0element that\u00a0Angular<\/strong>\u00a0uses with structural directives ( *ngIf , *ngFor , [ngSwitch] and custom directives). These\u00a0template<\/strong>\u00a0elements only work in the presence of structural directives, which help us to define a template that doesn\u2019t render anything by itself, but conditionally renders them to the DOM.<\/p>\n\n\n\n

 <div *ngIf=\u201dcondition==false ; else showNgTemplateContent\u201d> \r\n      Shouldn't be displayed \r\n  <\/div>\r\n\r\r\n<ng-template #showNgTemplateContent> Should be displayed\r\n<\/ng-template><\/code><\/pre>\n\n\n\n
In the above example, If the condition is false then we will show the text as \u201cShouldn’t be displayed\u201d else will show ng-template content as \u201cShould be displayed\u201d<\/em><\/p>\n\n\n\n
2- <ng-container><\/ng-container><\/span><\/h4>\n\n\n\n
ng-container<\/em>\u00a0is an extremely simple directive that allows you to group elements in a template that doesn\u2019t interfere with styles or layout because Angular doesn\u2019t put it in the DOM.<\/p>\n\n\n\n
This is helpful if you don\u2019t want any extra div on DOM, you can simply use
ng-container. For eg: If there are two structural directives are being called on one div as below:<\/p>\n\n\n\n
<div *ngIf=\"details\" *ngFor=\"let info of details\">\r\n  {{ info.content }}\r\n<\/div><\/code><\/pre>\n\n\n\n
Attempting to compile this code will result in the following error:<\/p>\n\n\n\n
Can't have multiple template bindings on one element. Use only one attribute prefixed with *<\/code><\/pre>\n\n\n\n
One workaround would be to separate the bindings as below:<\/p>\n\n\n\n
<div *ngIf=\"details\">\r\n  <div *ngFor=\"let info of details\">\r\n    {{ info.content }}\r\n  <\/div>\r\n<\/div><\/code><\/pre>\n\n\n\n
Or we can use <ng-container> <\/strong>without adding any extra element<\/em> to the DOM at runtime:<\/p>\n\n\n\n
<ng-container *ngIf=\"details\">\r\n  <div *ngFor=\"let info of details\">\r\n    {{ info.content }}\r\n  <\/div>\r\n<\/ng-container><\/code><\/pre>\n\n\n\n
3- \u00a0<ng-content><\/ng-content><\/span><\/h4>\n\n\n\n
ng-content<\/em>\u00a0is used to project content into Angular components. You use the\u00a0<ng-content><\/ng-content><\/strong>\u00a0tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content. This is well known as\u00a0Content Projection<\/strong><\/strong>.<\/p>\n\n\n\n
in others words,They are used to create configurable components. This means the components can be configured depending on the needs of its user. <\/p>\n\n\n\n
PS:<\/em><\/span> <\/strong> Components that are used in published libraries make use of\u00a0<ng-content><\/code>\u00a0to make themselves configurable.<\/em><\/p>\n\n\n\n
Consider a simple\u00a0<project-content><\/code>\u00a0component:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In parent.component.html, <project-content><\/strong> selector is used to show data of Project-content<\/em><\/strong> component<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The HTML content passed within the opening and closing tags of\u00a0<project-content><\/code>\u00a0component is the content to be projected. This is what we call\u00a0Content Projection<\/strong><\/strong>. The content will be rendered inside the\u00a0<ng-content><\/code>\u00a0within the component.\u00a0<\/p>\n\n\n\n
This allows the  parent component of\u00a0<project-content><\/code>\u00a0component to pass any custom footer within the component and control\u00a0exactly<\/em>\u00a0how they want it to be rendered.<\/p>\n\n\n\n
PS:<\/em><\/strong><\/span> In the example above, we set a single content projection, but we can also make multiple projections.<\/em><\/p>\n\n\n\n
Multiple Projections:<\/span><\/h4>\n\n\n\n
Instead of every content projected inside a single\u00a0<ng-content><\/code>, you can also control how the contents will get projected with the\u00a0select<\/code>\u00a0attribute of\u00a0<ng-content><\/code>. It takes an element selector to decide which content to project inside a particular\u00a0<ng-content><\/code><\/p>\n\n\n\n
Here\u2019s how:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
We have modified the\u00a0<project-content><\/code>\u00a0definition to perform Multi-content projection. The\u00a0select<\/code>\u00a0attribute selects the type of content that will be rendered inside a particular\u00a0<ng-content><\/code>. Here we have first\u00a0select<\/code>\u00a0to render header\u00a0h1<\/code>\u00a0element. If the projected content has no\u00a0h1<\/code>\u00a0element it won\u2019t render anything. Similarly the second\u00a0select<\/code>\u00a0looks for a\u00a0div<\/code>. The rest of the content gets rendered inside the last\u00a0<ng-content><\/code>\u00a0with no\u00a0select<\/code>.<\/p>\n\n\n\n
Calling the component from the parent component will look like:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
1 – <ng-template><\/ng-template> As the name suggests the <ng–template> is a\u00a0template\u00a0element that\u00a0Angular\u00a0uses with structural directives ( *ngIf , *ngFor , [ngSwitch] and custom directives). These\u00a0template\u00a0elements only work in the presence of structural directives, which help us to define a template that doesn\u2019t render anything by itself, but conditionally renders them to the DOM. In the […]<\/p>\n","protected":false},"author":1,"featured_media":1652,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[481,480,470,469],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1647"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1647"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1647\/revisions"}],"predecessor-version":[{"id":1653,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1647\/revisions\/1653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1652"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}