How delete element.nativeElement from DOM?

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

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

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

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