ng-template, ng-container, and ng-content: Complete Guide

Angular
4 minutes read

Introduction

Hello developers, today we will talk about making our Angular projects neat and easy to work on. Three helpful tools in Angular, ng-template, ng-container, and ng-content, help us do that.

  • ng-template helps us create plans or drafts for our pages.
  • ng-container helps us keep related things together without making our project messy.
  • ng-content helps us put content from one part of our project into another easily.

These tools help us keep our project tidy and easy to understand. They are helpful for anyone working on bigger projects. In the next parts, we will see how to use these tools with examples.

ng-template

ng-template directive is like a blueprint or a draft for your HTML content. It guides Angular on how to construct and render HTML.

Let’s take a couple of examples:

Example 1: Using ng-template with *ngIf

ng-template shines brightly when used with structural directives like *ngIf:

<ng-template [ngIf]="isDataAvailable">
  <div>Data is now available!</div>
</ng-template>

In this snippet, ng-template holds the HTML but refrains from displaying it. The *ngIf directive, based on the condition isDataAvailable, decides whether to render the HTML contained within ng-template. If isDataAvailable is true, the message “Data is now available!” will be displayed.

Example 2: Using ng-template with ngTemplateOutlet

The ngTemplateOutlet directive is another friend of ng-template that facilitates reusability of template content.

ngTemplateOutlet is a directive used to instantiate and render templates from ng-template. It provides the mechanism to take a defined template and render it to the DOM.

<ng-container *ngTemplateOutlet="myTemplate"></ng-container>

In this snippet, *ngTemplateOutlet is telling Angular to render the ng-template referenced by myTemplate inside the ng-container.

When you pair ng-template and ngTemplateOutlet, you unlock the ability to define templates and control where and when they get rendered within your application. This pairing is especially useful for rendering dynamic content or reusing common templates across different parts of your application.

Let’s take a look at the following example

<!-- Define the template -->
<ng-template #myTemplate>
  <div>This is a template.</div>
</ng-template>

<!-- Render the template -->
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>

This example will be translated as following

<div>This is a template.</div>

Let’s understand what is going on:

  1. An ng-template is defined with a template reference variable #myTemplate.
  2. An ng-container is used with the *ngTemplateOutlet directive to render the ng-template referenced by myTemplate.
  3. The content within ng-template is rendered to the DOM.

ng-container

ng-container directive, is not visible in the Document Object Model (DOM), it helps keep your code tidy and well-organized.

Now, let’s understand ng-container better. It’s like a container (box) that helps you keep similar things together without making your project messy. ng-container is great for when you want to use more than one rule or condition for showing content on your webpage, without making your code complicated.

Let’s understand ng-container with an easy example.

Example: Using ng-container with *ngIf and *ngFor

In this example, we want to show a list of items on our webpage only if a condition is true. We will use ng-container to help us do this in a clean way.

<ng-container *ngIf="showItems">
  <div *ngFor="let item of items">{{ item }}</div>
</ng-container>

Let’s understand what is going on:

  1. We use ng-container to hold our code. It’s like an invisible box.
  2. We check a condition with *ngIf. If showItems is true, we go ahead.
  3. Inside ng-container, we use *ngFor to show each item from the items list on our webpage.

Output when showItems is true

Notice here that the the ng-container is not shown the DOM.

ng-content

The ng-content directive is Angular’s way of facilitating content projection, essentially allowing us to insert custom content from a parent component into designated slots within a child component’s template.

Sounds complicated? Let’s break it down with a simple example

Example: Content Projection from Parent to Child Component

In this example, we have two components: a parent component and a child component. We aim to project content from the parent component into the child component, leveraging the power of ng-content.

<!-- Parent Component -->
<app-child>
  <div header>This is the header content</div>
  <div body>This is the body content</div>
</app-child>
<!-- Child Component Template -->
<ng-content select="[header]"></ng-content>
<ng-content select="[body]"></ng-content>

Let’s understand what is going on:

  1. In the parent component, we nest an app-child element, which is the selector for our child component. Within this element, we have two div elements, each carrying a different custom attribute (header and body).
  2. In the child component template, we place two ng-content directives, each with a select attribute. The select attribute specifies which content to project based on the custom attribute.
  3. The ng-content directive with select="[header]" projects the content from the parent’s div with the header attribute, and similarly, ng-content with select="[body]" projects the content from the div with the body attribute.
  4. The output mirrors the content from the parent component, showcasing it as per the structure defined in the child component template.

ng-content helps different parts of our project talk to each other in a nice way. It helps us keep our work tidy and easy to understand, which is great for building better projects.

Further Reading

Conclusion

In conclusion, we learned about three helpful tools in Angular – ng-template, ng-container, and ng-content. These tools help us keep our code clean and organized.

ng-template lets us make plans for our pages, ng-container helps keep our code together without making it messy, and ng-content allows us to share content between different parts of our project easily.

These tools are simple to use but can make a big difference in our projects. I encourage you to try using ng-template, ng-container, and ng-content in your Angular projects. By using these tools, you can find new and better ways to build your projects.

So, get hands-on, try these tools in your next Angular project, and see the difference. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *