Introduction
This post will describe the advanced features of Angular. The ng-template and related ng-container directive are powerful features for some use-cases in our Angular project. We will study each of these directives in detail. They are designed to be used together.
Description: ng-template
ng-template directive represents an Angular template. The content of this tag will be HTML content. But this directive elements will be rendered only if it is used with structural directives.
- The content of this directive will not be displayed directly.
- elements will be rendered only if it is used with structural directives like ngIf, ngFor, ngSwitch.
- Before rendering the view, the ng-template and its content are replaced by a comment by Angular. comment.
- In the ng-template directive, we will only specify the template. Usage with any structural directive will able to render something on the screen.
- We need to add some structural directive to tell ng-template what to do with the specified template.
- All structural directives are using ng-template under the hood.
<div *ngIf="condition">Template will render if the condition is true.</div>
The above statement works as below under the hood:
<ng-template [ngIf]="condition">
<div>Template will render if the condition is true.</div>
</ng-template> - The ng-template will not be seen in the DOM. It will be replaced by comment. That's why ng-template is not a true wen element.
- The asterisk is used with structural directives. All the structural directives evaluate to ng-template under the hood. So Asterisk(*) is the notation for ng-template.
- Example of ng-template
<p>Hello!</p>
<ng-template>
<p>Angular</p>
</ng-template>
<p>World</p>
The above code will be shown as below:
Description: ng-container
ng-container is a grouping element that doesn't interfere with HTML and CSS as Angular doesn't add it in the DOM. We will see the following scenarios for the usage of ng-container.
Scenario 1: Multiple Structural Directive on a single element
If we try to apply two structural directives on the same element then what will happen?
<div *ngIf="condition" *ngFor="let e of elements;">...</div>
The above statement will throw an error as mentioned below:
Uncaught Error: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *
To make things work we need to do something like this:
<div *ngIf="condition">
<div *ngFor="let e of elements;">
<p>HTML CONTENT</p>
</div>
</div>
We need to add an extra <div> tag to avoid the error. The creation of an extra div element in the DOM is non-desirable. Using ng-container we can avoid this error without adding an extra element.
<ng-contanier *ngIf="condition">
<div *ngFor="let e of elements;">
<p>HTML CONTENT</p>
</div>
</ng-container>
Scenario 2: Template UI getting a break because of grouping elements with extra <div> or <span>
We need to group native HTML elements to apply some condition to elements. This sometimes breaks our UI appearance as CSS will never expect these things.
Suppose we have a <div> tag inside a <p> tag to apply some condition using ngIf directive. Example:
We need to group native HTML elements to apply some condition to elements. This sometimes breaks our UI appearance as CSS will never expect these things.
Suppose we have a <div> tag inside a <p> tag to apply some condition using ngIf directive. Example:
<p>I turned on my laptop
<div *ngIf="condition">
asked by {{employee.name}}
</div>
and continued with my work.
</p>
Suppose if we have a CSS style for something like
p div{
color:red;
}
Then this style will get applied to this statement as well. But it was not intended to be applied here. So it's better to use <ng-container> as it will not interfere with CSS as well.
<p>I turned on my laptop
<ng-container *ngIf="condition">
asked by {{employee.name}}
</ng-container>
and continued with my work.
</p>
Scenario 3: When in HTML some elements require all immediate children of a specific type.
In HTML some elements can only be rendered if they are used with the specific parent element or some elements require all immediate descendants of a particular type. For example, the select element requires immediate option element. You can't wrap option in any native HTML element like <div> or <span> for conditions. So we can use <ng-container> to wrap <option> element with conditions.
Example:
<select>
<ng-container *ngFor="let e of elements">// ng-container used for applying condition
<ng-container *ngIf="condition'">
<option>......</option>
</ng-container>
</ng-container>
</select>
The
In HTML some elements can only be rendered if they are used with the specific parent element or some elements require all immediate descendants of a particular type. For example, the select element requires immediate option element. You can't wrap option in any native HTML element like <div> or <span> for conditions. So we can use <ng-container> to wrap <option> element with conditions.
Example:
<select>
<ng-container *ngFor="let e of elements">// ng-container used for applying condition
<ng-container *ngIf="condition'">
<option>......</option>
</ng-container>
</ng-container>
</select>
The
<ng-container>
is a syntax element identified by the Angular parser. It's not a directive, component, class, or interface.
ReplyDeleteExcellent idea!!! I really enjoyed reading your post. Thank you for your efforts . Share more like this.
Angularjs Training in T Nagar
RPA Training in T nagar
Software testing training in Tambaram
Dot Net Training in Velachery
Web Designing Course in T Nagar
Spoken English Classes in Velachery
German Classes in chennai
SEO Training in Anna Nagar
selenium training in tambaram
java training in tambaram