DEV Community

Cover image for Why and When Use Ng-template, NgContent, and NgContainer in Angular
Dany Paredes for This is Angular

Posted on • Updated on • Originally published at danywalls.com

Why and When Use Ng-template, NgContent, and NgContainer in Angular

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Photo by Kelly Sikkema on Unsplash

Top comments (1)

Collapse
 
rahulbenzeen profile image
RahulBenzeen

good explanation. thanks