Prime Vyapar

Tales from a Developer's Trenches

Using DOM APIs

Using DOM APIs - Angular - Prime Vyapar
In Angular, while most DOM manipulation is handled automatically, there might be situations where you need finer control. Components can leverage ElementRef to interact with the underlying DOM element directly.

Code Snippet
Copy
                
                   
import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-dom-api',
  templateUrl: './dom-api.component.html',
  styleUrl: './dom-api.component.scss'
})
export class DomApiComponent {
  constructor(elementRef: ElementRef) {
    console.log(elementRef.nativeElement);
  }
}

Angular provides lifecycle hooks called afterRender and afterNextRender to execute code after the component's view has been rendered. These hooks allow you to schedule tasks that depend on a fully built DOM.

Code Snippet
Copy
                
                   
import { afterRender, Component, ElementRef } from '@angular/core';

@Component({
  selector: 'app-dom-api',
  templateUrl: './dom-api.component.html',
  styleUrl: './dom-api.component.scss'
})
export class DomApiComponent {
  constructor(private elementRef: ElementRef) {
    console.log(elementRef.nativeElement);
    this.AfterRender();

  }

  AfterRender() {
    afterRender(() => {
      // Focus the first input element in this component.
      this.elementRef.nativeElement.querySelector('input')?.focus();
    });
  }

afterRender and afterNextRender must be called in an injection context, typically a component's constructor.
  • Focus on component templates and data binding for managing your DOM. Direct manipulation should be a last resort.
  • Render callbacks never run during server-side rendering or build-time pre-rendering.

Using a component's renderer

In specific scenarios, Angular components can inject Renderer2 to achieve DOM manipulation that interacts with other Angular functionalities. This approach is meant for advanced use cases where templating and data binding wouldn't suffice.

Code Snippet
Copy
                
                   
import { afterRender, Component, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-dom-api',
  templateUrl: './dom-api.component.html',
  styleUrl: './dom-api.component.scss'
})
export class DomApiComponent {
  constructor(private renderer: Renderer2) {
    

  }

When to Leverage DOM APIs in Angular

Although Angular takes care of most rendering tasks, certain functionalities might necessitate resorting to DOM APIs. Here are some common scenarios where this becomes necessary:
  • Fine-grained Control: For tasks requiring precise manipulation of the DOM beyond Angular's built-in features, DOM APIs come into play.
  • Focus Management : Focusing specific elements often necessitates DOM APIs.
  • DOM Measurement: Techniques like getBoundingClientRect require direct DOM access to measure element dimensions.
  • Reading Element Content: Accessing an element's text content directly can be achieved with DOM APIs.
  • Advanced Observers: Setting up native observers like MutationObserver, ResizeObserver, or IntersectionObserver often involves DOM manipulation.
Avoid inserting, removing, and modifying DOM elements. In particular, never directly set an element's innerHTML property, which can make your application vulnerable to cross-site scripting (XSS) exploits Angular's template bindings, including bindings for innerHTML, include safeguards that help protect against XSS attacks. See the Security guide for details.

Leave a Comment

This sample demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.

Comments







With ❤️ Happy Coding





With ❤️ Happy Coding