What is the difference between ElementRef, TemplateRef, and ViewContainerRef in Angular?

In Angular, ‘ElementRef‘, ‘TemplateRef‘, and ‘ViewContainerRef‘ are classes used to reference different types of elements and manipulate them at runtime. These classes are part of Angular’s rendering and view manipulation system. Let’s discuss each one of them in detail.

1. ElementRef

‘ElementRef‘ is a wrapper around a native DOM element. It allows you to access and manipulate a DOM element directly. Using ‘ElementRef‘, you can perform various operations such as changing the element’s classes, styles or attributes. However, using ElementRef to access the DOM is not recommended, as it might lead to security vulnerabilities like cross-site scripting (XSS) attacks. Therefore, it is better to use Angular’s Renderer2 or other platform-specific services instead.

Example of ElementRef:

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-element-ref-example',
  template: `
    <h2>ElementRef Example</h2>
    <button (click)="onClick()">Click me!</button>
  `,
})
export class ElementRefExampleComponent implements OnInit {
  constructor(private elementRef: ElementRef) {}

  ngOnInit() {}

  onClick() {
    this.elementRef.nativeElement.style.backgroundColor = 'yellow';
  }
}

2. TemplateRef

‘TemplateRef‘ is a class that represents an embedded template, which can be used to instantiate views. It works in conjunction with ‘ViewContainerRef‘ to create, update, delete, and manipulate views. The syntax is usually a combination of HTML and Angular template syntax (such as ‘*ngFor‘, ‘*ngIf‘ or other structural directives).

Example of TemplateRef:

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-ref-example',
  template: `
    <h2>TemplateRef Example</h2>
    <ng-template #myTemplate>
      <h3>This is an embedded template</h3>
    </ng-template>
  `,
})
export class TemplateRefExampleComponent {
  // ViewChild is used to get a reference to the TemplateRef in the component.
  @ViewChild('myTemplate') myTemplate: TemplateRef<any>;
}

3. ViewContainerRef

‘ViewContainerRef‘ is a class that represents a container where one or more views can be attached. It is essentially a container into which you can insert, modify, or remove views dynamically. The main use case for ‘ViewContainerRef‘ is when dealing with embedded templates, for example, by using ‘*ngFor‘ or ‘*ngIf‘.

Example of ViewContainerRef:

import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-view-container-ref-example',
  template: `
    <h2>ViewContainerRef Example</h2>
    <ng-template #myTemplate>
      <h3>This is an embedded template</h3>
    </ng-template>
    <button (click)="createTemplate()">Create Template</button>
    <button (click)="deleteTemplate()">Delete Template</button>
  `,
})
export class ViewContainerRefExampleComponent {
  @ViewChild('myTemplate') myTemplate: TemplateRef<any>;

  constructor(private viewContainerRef: ViewContainerRef) {}

  createTemplate() {
    this.viewContainerRef.createEmbeddedView(this.myTemplate);
  }

  deleteTemplate() {
    this.viewContainerRef.clear();
  }
}

In summary, ‘ElementRef‘ is used to access and manipulate DOM elements directly, while ‘TemplateRef‘ represents an embedded template that can be used to create views. ‘ViewContainerRef‘ is a container for views, and it allows you to dynamically create, update, delete and manipulate embedded views.