Difference between ng-template, ng-content and ng-container

While working on a very complex feature for a client in which I had to present hierarchical dynamic data in three column layout with ability to expand like google image search on each level, I came across ng-content, which seemed like a perfect fit for the solution I was thinking about implementing. But I got confused between ng-content and ng-container when I saw the generated html while debugging my code in developer console. I further investigated both ng-content and ng-container and decided to write my finding here in my blog for future references. If you are also wondering what are they for, read on.

<ng-container>

When you have to write different host elements to combine many structural component like the following

<div *ngIf="condition">
   <div *ngFor="...">
    Some content here
   </div>
</div>

You get many unintentional host elements which are not required for your layout. It becomes a prolem when you have complex application with a hug DOM. You want to keep these elements to minimum level. In this case you can use ng-container which tell angular to not insert additional DOM elements and just use the ng-container to evaluate something e.g in ngIf to evaluate condition.

<ng-template>

This is an angular element which is used to render HTML, it never gets displayed directly. It is used by structural directives like ngIf and ngFor.

We can use them directly in some cases e.g when we want to reuse a template multiple times in our code. Suppose we have following code

<ng-template>
  <p>Hello World!</p>
</ng-template> 

 When it will run the code inside it will not get displayed. If you will inpect the HTML in your developer console you will see that the above will get replaced by a comment and you will find only following in its place.

<!---->

Now this doesn't make sense that angular is giving a component which just eats up your code and does nothing. This component is actually used to create a reusable template which can be accessd via a tempalte reference. It is used internally by angular to replace the structure directives with it and later at run time is converted into a comment. So for example if you have an ngFor in your code, it will be replaced by ng-template and at run time with a comment.

<div *ngfor="let i of [1,2,3,4,5,6]">
  <p>Hello World!</p>
</div>  

When you examin it in developer tools you will find the following

<!--bindings={
  "ng-reflect-ng-for-of": "1,2,3,4,5,6"
}-->

Now ngIf and ngFor both can be written in many different ways. We usually use compact syntax *ngIf and *ngFor to keep our code compact. Following are some examples of how we can write ngIf.

<div *ngIf="condition">...</div>
<div template="ngIf condition">...</div>
<ng-template [ngIf]="condition"><div>...</div></ng-template>

From the above, the third one is the form in which angular converts all our *ngIf block. So your first ngIf will converted like the following

<ng-template [ngIf]="condition">
  <div>...</div>
</ng-template>

As said previously in this post that ng-template can also be used to write your own reuseable templates. So how do we do that? You can define any block as ng-template and give it and id and refer to it using that id. Following is an example

<div *ngIf="condition; else elseBlock">...</div>
<ng-template #elseBlock>...</ng-template> 

Notice the id elseBlock in the ng-template directive and its use inside in ngIf value.

<ng-content>

Have you ever felt the need of writing a component like the following

<my-component>
  <div> Some text here </div>
  <div> Some text here </div>
  <div> Some text here </div>
  <div> Some text here </div>
</my-component>

Now your intention here is to have your custom component and keep having the additional html that you have written between statring and ending tags. If yes, then you are on the right place.

Angular provides an element called ng-content which can used to write configurable components. This is called Component Projection, neaning the content that will be procvided inside the opening and closing brackets will be projected. It will be rendered inside a <ng-content> element. It means that you must include a <ng-content> tag somewhere in your components html template so that the provided content can be projected inside it.

So your my-component should have a template like the following

// myComponent.component.html

<div class="row">
   This is a row
   <ng-content></ng-content>
</div>

The ng-content inside above tempalte will be replaced with the provided html between <my-component> and </my-component>