Photo by Kelly Sikkema on Unsplash
How to get and use ng-template, ng-container and ng-content
Using ng-template, ng-container, and ng-content with examples
Table of contents
When I started to play with templates and dynamic content in angular, I get surprised by multiple directives in angular to work with it ng-template, ng-container, and ng-content. Each one is pretty similar initially; each has exceptional use cases and features that set them apart.
I'll be showcasing various scenarios for ng-template, ng-container, and ng-content, complete with helpful examples to illustrate the appropriate use of each directive. But first, let's briefly explain each one:
ng-template
help to define a template that can be reused multiple times within an Angular component.ng-container
when we need to group elements without adding additional nodes to the DOM.ng-content
is used to render content dynamically that is passed in from the parent component.
ng-template
ng-template
defines a template block that can be used to render content dynamically. It provides a way to define an HTML code that can be reused multiple times within an Angular component.
For example, one everyday use case for ng-template
is to render conditional content with ngIf
or ngSwitch
directives.
<ng-template #myTemplate>
<div *ngIf="hasBalance">
<p>Your amount is 5000€.</p>
</div>
<div *ngIf="!hasBalance">
<p>Sorry, no balance.</p>
</div>
</ng-template>
In this example, we define a template block that contains two div
elements with *ngIf
directives. The *ngIf
directives will render one of the div
elements based on the value of hasBalance
.
Also, we can use this template block in multiple places within our component in a ng-container
element:
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
ng-container
ng-container
help to group elements without adding additional nodes to the DOM. It is often used with structural directives like *ngIf
, *ngFor
, and *ngSwitch
.
One common use case for ng-container
is to apply a structural directive to multiple elements without wrapping them in an additional HTML tag for example:
<div *ngIf="hasBalance">
<p>Your amount is 5000€.</p>
</div>
<div *ngIf="!hasBalance">
<p>Sorry, no balance.</p>
</div>
In this example, we have two div
elements with *ngIf
directives. However, if we wanted to apply the *ngIf
directive to both elements, we would need to wrap them in an additional HTML tag like this:
<div *ngIf="activeSession">
<div *ngIf="hasBalance">
<p>Your amount is 5000€.</p>
</div>
<div *ngIf="!hasBalance">
<p>Sorry, no balance.</p>
</div>
</div>
The extra div
element is not necessary. Instead, we can use an ng-container
element to group the div
elements together without adding a tag:
<ng-container *ngIf="activeSession">
<div *ngIf="hasBalance">
<p>Your amount is 5000€.</p>
</div>
<div *ngIf="!hasBalance">
<p>Sorry, no balance.</p>
</div>
</ng-container>
We use the ng-container
Group the `div` elements together without adding an HTML tag.
ng-content
ng-content
is an easy way to dynamically render content passed in from the parent component. It allows a parent component to inject content into a child component's template.
One common use case for ng-content
is to create a reusable component that can accept different content based on usage. For example:
@Component({
selector: 'app-alert',
template: `
<div class="alert alert-{{type}}">
<ng-content></ng-content>
</div>
`
})
export class AlertComponent {
@Input() type: string;
}
We define an AlertComponent
accepts a type
input and uses ng-content
to render the content passed in from the parent component. The parent component can use this component like this:
<app-alert type="success">
<p>Success!</p>
</app-alert>
<app-alert type="danger">
<p>Something went wrong!</p>
</app-alert>
In this example, we use them AlertComponent
to display success and error messages. The content inside the component is injected into the template using ng-content
.
Conclusion
In conclusion, ng-template, ng-container, and ng-content are three commonly used directives in Angular templates. Although they may appear similar initially, each one has a unique purpose and function.
I hope these examples and scenarios assist you in selecting and utilizing each one as needed.