Angular Core Elements[ng]

There are several things under the hood of Angular core library. Here, we are going to look three templates which are mostly confused and also used by every angular developer

ng-container
ng-content
ng-template

ng-container

It only holds the directives without creating the HTML template. We can apply conditional expressions to this tag and insert the template in it, so that the template in it will be loaded with respect to the condition provided, this may be helpful when there is a need to apply multiple conditions on single element.

Below is the basic example how we can apply conditional expressions.

---------what you right-------------------
<ng-container *ngIf="isIronMan">
  <h1>Tony Stark</h1>
  <p>.......</p>
</ng-container>

--------what it loads in DOM---------------
<h1>Tony Stark</h1>
<p>.......</p>

ng-template

The template in it doesn't load until unless we attach it to the container. We can apply as many conditions as we want if we attach it to a directive. These are instances of TemplateRef class.

We need to pass the reference of the template to ViewContainerRef class createEmbededView method, which in turns load it in the container. Developers have full control on how and when it should display.

We can also apply structural directives on the template. You can understand it in the below example.

<ng-template [ngIf]="isAdmin" [ngIfElse]="loading">
  <h1>Admin</h1>
</ng-template>
<ng-template #loading>
  <h1>Loading....</h1>
<ng-template>

In the above example we can see how conditions changes the template rendering. ngIf checks whether isAdmin is true or false. If true it loads the first template or else it loads the template referred with loading name.

ng-content

In simple terms we can say it as replacement for Iframes. We create directives and the content inside that particular directive selector tag will be loaded into the directive and We can specify where to project the content inside the template by assigning to an attribute called select.
It doesn't create any DOM element on its name.

We can understand more with the below example.
General way of defining ng-content with directive.

----------------Directive--------------
import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p>From another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From another component</p>

If the attribute matches, then content is loaded into the specified position.

import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
    <ng-content select="[testProjection]"></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p testProjection>From another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From another component</p>

If the attribute doesn't match then it loads into the default position.

import { Component } from '@angular/core';
@Component({
  selector: 'app-test',
  template: `
    <h1>Test content</h1>
    <ng-content></ng-content>
    <ng-content select="[testProjection]"></ng-content>
  `
})
export class TestComponent {}

----------------Another Component--------
<app-test>
  <p testProjection>From Example 1 another component</p>
  <p>From Example 2 another component</p>
</app-test>

-----------------Output--------------
<h1>Test content</h1>
<p>From Example 2 another component</p>
<p>From Example 1 another component</p>

In the second case even the p tag with testProjection is written first, due to ng-content select attribute with testProjection is loaded after default ng-content it will be loaded after the second p tag.

Hope you got the clarity and know the differences between all the three elements.

Happy coding.....