NashTech Insights

ng-template in Angular

Alka Vats
Alka Vats
Table of Contents

Introduction:

In Angular, the ng-template directive is a powerful tool that enhances the flexibility and reusability of your application’s UI. It allows you to define template content that can be rendered and manipulated based on different conditions or data. ng-template is commonly used with structural directives like ngIf, ngFor, and ngSwitch to create dynamic and reusable templates. In this blog, we’ll dive deeper into ng-template in Angular, exploring its features, and use cases, and providing detailed examples to illustrate its usage.

If you want to learn about the NGRX, state management angular, you can refer here.

Understanding ng-template:

The ng-template directive serves as a container for holding content that can be conditionally rendered or repeated. It allows you to define a template block without rendering it immediately. Instead, you can reference and render the template dynamically at a later point in your application. By leveraging ng-template, you can create more efficient and maintainable UI components.

Syntax of ng-template:

The ng-template directive can be defined in two ways:

Inline Template:

<ng-template>
  <!-- Template content goes here -->
</ng-template>

Template Reference Variable:

<ng-template #templateRefVariable>
  <!-- Template content goes here -->
</ng-template>

So, the template content within the ng-template directive can include any valid HTML markup, Angular directives, and bindings.

Example 1: Conditional Rendering with ng-template and ngIf:

ng-template is commonly used with ngIf to conditionally render content based on a boolean condition.

<ng-template #messageTemplate>
  <p>Success! Your request has been processed.</p>
</ng-template>

<div *ngIf="showMessage; then messageTemplate"></div>

Therefore, In this example, the ng-template is defined with the template reference variable messageTemplate, which contains a success message. The ngIf directive is then used to conditionally render the template content. If the showMessage variable is true, the messageTemplate is rendered within the <div>.

Example 2: Repeating Content with ng-template and ngFor:

ng-template can be combined with ngFor to repeat content based on an array of data.

<ng-template #itemTemplate let-item let-index="index">
  <li>{{ index }}: {{ item }}</li>
</ng-template>

<ul>
  <ng-container *ngFor="let item of items; index as i">
    <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
  </ng-container>
</ul>

Therefore, In this example, the ng-template is defined with the template reference variable itemTemplate, which displays each item along with its index. The ngFor directive is used to iterate over the items array. Inside the ng-template, the let-item and let-index="index" syntax allows access to the current item and index within the template. The ngTemplateOutlet directive is used to render the template for each item.

Example 3: Passing Context to ng-template: ng-template allows you to pass contextual information to the template using the context property.
<ng-template #userTemplate let-user="user" let-index="index">
  <div>{{ index }}: {{ user.name }}</div>
</ng-template>

<div *ngFor="let user of users; index as i">
  <ng-container *ngTemplateOutlet="userTemplate; context: { user: user, index: i }"></ng-container>
</div>

Therefore, in this example, the ng-template is defined with the template reference variable userTemplate, which displays user information along with the index. Inside the ng-template, the let-user="user" and let-index="index" syntax allows access to the user and index within the template. Hence, the ngTemplateOutlet directive is used to render the template for each user, passing the user and index as the context.

Conclusion:

The ng-template directive in Angular provides a powerful way to create dynamic and reusable templates. So, by leveraging ng-template with structural directives like ngIf and ngFor, you can conditionally render content, repeat content based on data, and pass contextual information to templates. Therefore, In this blog, we explored the syntax and usage of ng-template, along with detailed examples of conditional rendering, content repetition, and passing context. Incorporate ng-template into your Angular applications to enhance their flexibility and maintainability. Happy coding!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.

Alka Vats

Alka Vats

Alka Vats is a Software Consultant at Nashtech. She is passionate about web development. She is recognized as a good team player, a dedicated and responsible professional, and a technology enthusiast. She is a quick learner & curious to learn new technologies. Her hobbies include reading books, watching movies, and traveling.

Leave a Comment

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

Suggested Article

%d bloggers like this: