Comment supprimer element.nativeElement du DOM?

Question

J'ai essayé de cette façon:

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

this.draggableElement.nativeElement.remove();

HTML:

<div #draggable>Block</div>

Answer 1

Votre code fonctionnera également, seulement vous devez le faire est de supprimer l'élément sur OnInit () , si vous essayez de supprimer des éléments sur le constructeur, cette vue temporelle ne soyez pas prêt.

voici un exemple

en . html

<div #draggable>Block</div>

et dans . ts

export class AppComponent implements OnInit {
  name="Angular";

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

  constructor() { }

  ngOnInit() {
   this.draggableElement.nativeElement.remove();
  }
}

voici une démo Stackblitz

Answer 2

Service utilisateur Renderer2 pour supprimer l'élément du dom

removeChild () Implémentez ce rappel pour supprimer un nœud enfant du DOM de l'élément Host.

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

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

Answer 3

Vous pouvez utiliser * ngIf right, qui sera supprimé du DOM en cas d'échec de la condition.