How delete element.nativeElement from DOM?

Question

I tried this way:

    @ViewChild('draggable') private draggableElement: ElementRef;

    this.draggableElement.nativeElement.remove();

HTML:

    <div #draggable>Block</div>

Why would you want to programmatically remove a DOM element using Angular? — Amadán, Aug 25 '18 at 14:57

score 28 · Accepted Answer · edited Dec 03 '20 at 16:28

Your code can also work, all you have to do is remove element on OnInit(), If you try to remove elements on constructor, the view not be ready.

here's is an example

in .html

    <div #draggable>Block</div>

and in .ts

    export class AppComponent implements OnInit {
      name="Angular";
    
      @ViewChild('draggable') private draggableElement: ElementRef;
    
      constructor() { }
    
      ngOnInit() {
       this.draggableElement.nativeElement.remove();
      }
    }

here's is an Stackblitz demo

score 3 · Answer 2 · edited Dec 08 '20 at 10:04

User Renderer2 service to remove element from dom

removeChild() Implement this callback to remove a child node from the host element's DOM.

@ViewChild('draggable')  draggableElement: ElementRef;
constructor(private renderer2: Renderer2,private el:ElementRef) {}
ngOnInit() {
  this.renderer2.removeChild(this.el.nativeElement,this.draggableElement.nativeElement);
}

Example:https://stackblitz.com/edit/angular-renderer2-remove

score 1 · Answer 3 · answered Aug 25 '18 at 12:55

1

You can use *ngIf right, which will be removed from the DOM when condition fails.

Block

answered Aug 25 '18 at 12:55

Suresh Kumar Ariya

9,516
1
18
27

3

I asked another question, not about ngIf – POV Aug 25 '18 at 12:56
A little thing against using `*ngIf` but if you're using it, you will not be able to use that element togheter with `@ViewChild()` in the `ngOnInit` since the element isn't existing at that time. – Raphaël Balet Apr 10 '23 at 13:17

score -1 · Answer 4 · answered Oct 22 '21 at 15:59

If you shall neither not use *ngIf nor nativeElement because what you try to remove is a component I would recommend you to remove the component with pure javascript.

<your-component id="draggable" #draggable>Block</your-component>

document.getElementById('draggable').remove()

If you want to do it in an angular manner, then you would have to use ViewContainerRef. that method is explained in this issue

How delete element.nativeElement from DOM?

4 Answers4

Linked