ng-template & ng container in angular

 In an Angular application, the user interface is the fact: the tags themselves, stored in a template file. Most developers are familiar with both components and directives. However, the ng-template directive is a powerful but often misunderstood tool. This blog will teach you what ng-template is, provide some examples, and show how it lets Angular applications display advanced UI patterns.

What is ng-template?

ng-template is an Angular directive that specifies a template block not to be rendered by the browser by default. Instead, it is treated as a blueprint for making dynamic places: when combined with structural directives such as *ngIf, *ngFor, or your own, one of the above might as well be called a register. Here is a way to save.

Characteristics

1. Not Rendered at the Beginning: It's as if everything inside ng-template were dull, waiting for approval.
2. Collaborates with Structural Directives: Used to mark content which depends on something like a condition you may want to show a larger view of or data that is supposed to not just go away.
3. Takes Contextual Information: Lets you pass data to templates for dynamic rendering.

Basic Usage of ng-template

Example 1: Conditional Rendering with *ngIf and else

This is a common use case where alternate content is shown when a particular condition isn’t true:

<div *ngIf="userLoggedIn; else loginPrompt">
  Welcome, {{ username }}!
</div>

<ng-template #loginPrompt>
  <p>Please log in.</p>
</ng-template>

Here:

• The else clause calls the loginPrompt template.
• The loginPrompt template only gets rendered when userLoggedInis false.

How It Works:

Angular converts the *ngIf syntax into:

<ng-template [ngIf]="userLoggedIn">
  <div>Welcome, {{ username }}!</div>
</ng-template>

The #loginPrompt is a template reference variable pointing to the ng-template.

The Role of Structural Directives

Structural directives (e.g., *ngIf, *ngFor) manipulate the DOM by adding or removing elements. As it turns out, they use ng-template to define the content they manage.

Example 2: How *ngFor Uses ng-template

This code:

<ul>
  <li *ngFor="let item of items; let i = index">{{ i }}: {{ item }}</li>
</ul>

Turns into this thanks to Angular:

<ul>
  <ng-template ngFor let-item [ngForOf]="items" let-i="index">
    <li>{{ i }}: {{ item }}</li>
  </ng-template>
</ul>

The contents of ng-template provide the structure that gets repeated for each item in items .

Advanced Use Cases

1. Dynamic Templates with ngTemplateOutlet

Use ngTemplateOutlet to render a template dynamically, optionally with context data:

@Component({
  template: `
    <ng-container *ngTemplateOutlet="greetingTemplate; context: { $implicit: 'User' }">
    </ng-container>

    <ng-template #greetingTemplate let-message>
      Welcome, {{ message }}!
    </ng-template>
  `
})

Here:

• ngTemplateOutlet displays greetingTemplate, together with context information.
• let-message gets the context's $implicit value.

2. Custom Structural Directives

Create reusable directives that leverage ng-template:

@Directive({
  selector: '[appRepeat]'
})
export class RepeatDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appRepeat(times: number) {
    this.viewContainer.clear();
    for (let i = 0; i < times; i++) {
      this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: i + 1 });
    }
  }
}

Usage:

<ul>
  <li *appRepeat="3">Item {{ count }}</li>
</ul>

Output:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

3. Content Projection with ng-content and Templates
Pass templates to components as inputs for flexible content projection.
Parent Component:

<app-card>
<ng-template #header>My Custom Header</ng-template>
<ng-template #body>Body: {{ data }}</ng-template>
</app-card>
@Component({
selector: 'app-card',
template: `
<div class="card">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<ng-container *ngTemplateOutlet="bodyTemplate; context: { data: cardData }"></ng-container>
</div>
`,
})
export class CardComponent {
@ContentChild('header') headerTemplate!: TemplateRef<any>;
@ContentChild('body') bodyTemplate!: TemplateRef<any>;
cardData = 'Sample data';
}

ng-template vs. ng-container

Feature	ng-template	ng-container
Rendering	Not rendered by default	Rendered as a lightweight container
Use Case	Define reusable template blocks	Group elements without adding extra DOM nodes
Structural Directives	Requires a directive to render	Can host structural directives directly

Best Practices

Child Component (app-card):

• Avoid Overuse of Templates: Use ng-template only when necessary to keep the DOM clean.

• Pass Data Through Context: Use context objects for dynamic template rendering.

• Combine with ng-container: Use ng-container for grouping structural directives to prevent unnecessary DOM elements.