How to Use DOM Manipulation properly in Angular

How to Use DOM Manipulation properly in Angular

Most of the time, we are using javascript techniques inside angular. we almost forget about the Framework’s features. Let's utilize them. How to do DOM Manipulation properly in Angular

Often when we are using JavaScript techniques inside Angular, we almost forget about the framework’s features. Let's utilize them.

One of the interesting topics in web development is DOM manipulations. There are many ways to manipulate the DOM in Angular. Let's use them instead of straight forward JavaScript approaches.

Usually, there are two concepts in DOM Manipulations.

  1. Modifying DOM Elements.
  2. Modifying DOM Structure.

Modifying DOM Elements:

We are familiar with a lot of JavaScript methods that modify the DOM element. Here are some of them:

  1. classList.add()
  2. setAttribute()
  3. style.setProperty()

These all are JavaScript native DOM element methods.

There are multiple ways to modify the DOM elements in Angular. We will discuss almost every method and choose the best among them.

Method: 1

Concepts:

  1. Template reference variables.
  2. ElementRef.
  3. @Viewchild/@Viewchildren.
  4. AfterViewInit.

Definitions:

  1. Template reference — Reference to a particular DOM element.
  2. ElementRef — ElementRef is a class, which consists of all native DOM elements. Using nativeElement object we can access all DOM elements in Angular.
  3. @Viewchild/@Viewchildren — Select child or all children elements from the DOM.
  4. AfterViewInit — One of this Lifecycle hook is called after the Angular component initialized its view.

angular dom

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Exploring Angular DOM manipulation techniques using ViewContainerRef

The article explores common elements used for DOM manipulation in Angular with a particular focus on ViewContainerRef. Learn why they are needed, how they work and when you need to use which.

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

Angular NgClass Example | NgClass Directive In Angular 9

Angular NgClass is an inbuilt directive that allows you to apply CSS classes dynamically based on expression evaluation. NgClass offers three simple ways.