Oftentimes, we find that we want to manipulate the DOM (Document Object Model), maybe hiding an element, or applying styles based on a given component logic, Angular Renderer2 makes this easy for us.

Problem

Angular DOM manipulation is handled using their built-in Renderer2, and it can do quite amazing stuff.

So, today, we will see how we can move a child element from one div to another.

Solution

Component

import {

 Component,

 ElementRef,

 inject,

 Renderer2,

 ViewChild,

} from '@angular/core';



@Component({

 selector: 'app-rendrere2-for-dom-manipulation',

 templateUrl: './rendrere2-for-dom-manipulation.component.html',

 styleUrls: ['./rendrere2-for-dom-manipulation.component.scss'],

 standalone: true,

})

export class Rendrere2ForDomManipulationComponent {

 @ViewChild('sourceParent', { static: true })

 private sourceParent!: ElementRef<HTMLDivElement>;



 @ViewChild('childElement', { static: true })

 private childElement!: ElementRef<HTMLDivElement>;



 @ViewChild('targetParent', { static: true })

 private targetParent!: ElementRef<HTMLDivElement>;



 private _renderer2: Renderer2 = inject(Renderer2);



 public moveChildToParentTwo(): void {

   this._renderer2.removeChild(

     this.sourceParent.nativeElement,

     this.childElement.nativeElement

   );

   this._renderer2.appendChild(

     this.targetParent.nativeElement,

     this.childElement.nativeElement

   );

   // also, whilst in parent two, we give child background or green

   this._renderer2.setStyle(

     this.childElement.nativeElement,

     'background-color',

     'green'

   );

   // you can try other fancier things here

 }

}

HTML

<div class="wrapper">

 <div #sourceParent class="source-parent">

   I am parent A

   <div #childElement class="child-element">I am Child of A</div>

 </div>



 <div #targetParent class="target-parent">I am parent B</div>



 <div class="move-child" (click)="moveChildToParentTwo()">

   Move Child of A to Parent B

 </div>

</div>

Discussion

Component

So, for us to be able to have Angular DOM manipulation, we will need something to manipulate in the first place.

That is where we have the below:

 @ViewChild('sourceParent', { static: true })

 private sourceParent!: ElementRef<HTMLDivElement>;


 @ViewChild('childElement', { static: true })

 private childElement!: ElementRef<HTMLDivElement>;


 @ViewChild('targetParent', { static: true })

 private targetParent!: ElementRef<HTMLDivElement>;

We are defining a source, child, and target and we will see how to connect these to the HTML as well.

Then since we will be relying on Angular’s built-in DOM manipulation, that is where Angular Renderer2 comes in:

private _renderer2: Renderer2 = inject(Renderer2);

Finally, we will be having a method, where we do all the fancy manipulations, we can remove Angular element or add Angular element amongst DOM element.

Here, we get to move Angular element, and then also set the element style in Angular component. Again, feel free to explore this as much as you can.

 public moveChildToParentTwo(): void {

   this._renderer2.removeChild(

     this.sourceParent.nativeElement,

     this.childElement.nativeElement

   );

   this._renderer2.appendChild(

     this.targetParent.nativeElement,

     this.childElement.nativeElement

   );

   // also, whilst in parent two, we give child background or green

   this._renderer2.setStyle(

     this.childElement.nativeElement,

     'background-color',

     'green'

   );

   // you can try other fancier things here

 }

HTML

First of all, we are defining the source parent, from which we will remove Angular element, and also we define the target.

 <div #sourceParent class="source-parent">

   I am parent A

   <div #childElement class="child-element">I am Child of A</div>

 </div>

Then we define our target.

<div #targetParent class="target-parent">I am parent B</div>

Finally, the action button for this

 <div class="move-child" (click)="moveChildToParentTwo()">

   Move Child of A to Parent B

 </div>

Conclusion

As you can see, it is easy to use Angular Renderer2 to remove Angular Element from one place to another. This way, JavaScript DOM manipulation is handled in a much more reliable way, and also went ahead and saw how to set element style in Angular component.

The possibilities are endless, and applications include:

1. Creating drag and drop in Angular.

2. Updating styles dynamically in Angular component.

3. Removing and adding elements, including the script elements

And with that, happy coding!

God loves you!