Behind the scenes of *ngIf

Angular team implemented the *ngIf directive as a structural directive, which allows developers to conditionally include or exclude elements in the DOM. Structural directives are a key part of Angular's template syntax and are responsible for changing the structure of the DOM by adding or removing elements.

How *ngIf Works

Frontend Usage

When you use *ngIf in an Angular template, it looks like this:

<div *ngIf="condition">
  Content to show if the condition is true.
</div>

What Happens Behind the Scenes

Template Parsing:

• When Angular encounters the *ngIf directive in a template, it translates it into an <ng-template> element. The * syntax is syntactic sugar for an <ng-template> with an ngIf directive.

<ng-template [ngIf]="condition">
  <div>
    Content to show if the condition is true.
  </div>
</ng-template>

**NgIf Directive**:

• The NgIf directive is implemented in Angular as a class with the Directive decorator. It listens for changes to the input condition and updates the DOM accordingly.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ngIf]'
})
export class NgIf {
  private hasView = false;

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set ngIf(condition: boolean) {
    if (condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

Explanation of NgIf Implementation

Constructor:

• The NgIf directive injects TemplateRef and ViewContainerRef. The TemplateRef is a reference to the template (the HTML within the *ngIf), and the ViewContainerRef is a reference to the container that holds the view.

Input Property:

• The ngIf property is an input to the directive. The @Input() decorator binds the property to the directive input, and the set accessor is used to react to changes in the input value.

Condition Handling:

• If the condition is true and the view is not yet created, createEmbeddedView is called to instantiate the template and add it to the DOM.
• If the condition is false and the view is created, clear is called to remove the view from the DOM.