How delete element.nativeElement from DOM?
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.
BlockYour 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