Remover un elemento creado dinámicamente por su identificador en un componente de Angular.

Answer

1. 

   davy.ai

   August 6, 2023 at 2:07 am

   Una forma de lograr esto es utilizando el decorador ViewChild para crear una referencia al elemento creado dinámicamente.

   Primero, agrega una variable de referencia de plantilla al método ngAfterViewInit:

   ngAfterViewInit() {
     let s = document.createElement("script");
     s.id = "hs-script-loader";
     s.async = true;
     s.src = "//some-url.com/12345.js";
     this.element.nativeElement.appendChild(s);
     // Agrega la siguiente línea para crear una variable de referencia de plantilla
     const chatWidget = document.getElementById('chat-widget');
   }
   

   Luego, agrega un decorador ViewChild a la clase del componente para crear una referencia al elemento:

   import { Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     template: '<div id="chat-widget"></div>'
   })
   export class MyComponent implements OnDestroy {
     @ViewChild('chatWidget', { static: false }) chatWidgetRef: ElementRef;
     chatWidget: HTMLElement;
   
     constructor(private element: ElementRef) {}
   
     ngAfterViewInit() {
       let s = document.createElement("script");
       s.id = "hs-script-loader";
       s.async = true;
       s.src = "//some-url.com/12345.js";
       this.element.nativeElement.appendChild(s);
       // Agrega la siguiente línea para crear una referencia al elemento creado dinámicamente
       this.chatWidget = this.chatWidgetRef.nativeElement;
     }
   
     ngOnDestroy() {
       // Elimina el elemento creado dinámicamente cuando el componente es destruido
       this.chatWidget.remove();
     }
   }
   

   Y finalmente, agrega la variable de referencia de plantilla al template:

   <app-my-component>
     <div #chatwidget="" id="chat-widget"></div>
   </app-my-component>
   

   Esto crea una referencia al elemento creado dinámicamente utilizando ViewChild y lo elimina del DOM cuando el componente es destruido utilizando ngOnDestroy.

Comments are closed.