1

Tengo un botón que cada vez que se pulsa inyecta un código HTML en un div contenedor. El codigo inyectado es el siguiente.

  <div class="row">
    <div class="col-5 mt-2 pr-0">
       <div class="input-group">
          <div class="input-group-prepend">
             <span class="input-group-text inputMini" id="inputGroup-sizing-default">IMEI</span>
          </div>
          <input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default">
       </div>
    </div>
    <div class="col-5 mt-2 pr-0">
       <div class="input-group">
          <div class="input-group-prepend">
             span class="input-group-text inputMini" id="inputGroup-sizing-default">BUZÓN</span>
          </div>
          <input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default">
       </div>
     </div>
     <div class="col-2 pr-0 d-flex-left-center">
        <button class="btn rounded-circle" (click)="removeDevice($event)>
          <em class="fa fa-times"></em>
        </button>
     </div>
  </div>

Como se observa, estoy añadiendo un elemento que contiene una llamada a una función en ese código inyectado.

Los elementos me los pinta correctamente en pantalla pero al pulsar sobre el elemento que contiene la llamada a la función removeDevice(), nunca entra a esa llamada. ¿Alguien me puede decir porque motivo no entra? ¿Estoy inyectando el código html de forma correcta?

el codigo en el componente que he creado para inyectar ese código

@ViewChild('addDevice', {static: false}) divDevice: ElementRef;

const div: HTMLDivElement = this.renderer.createElement('div');
div.className = "col-md-12";

div.innerHTML = '<div class="row"><div class="col-5 mt-2 pr-0"><div class="input-group"><div class="input-group-prepend"><span class="input-group-text inputMini" id="inputGroup-sizing-default">IMEI</span></div><input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default"></div></div><div class="col-5 mt-2 pr-0"><div class="input-group"><div class="input-group-prepend"><span class="input-group-text inputMini" id="inputGroup-sizing-default">BUZÓN</span></div><input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default"></div></div><div class="col-2 pr-0 d-flex-left-center"><button class="btn rounded-circle" (click)="removeDevice($event)"><em class="fa fa-times"></em></button></div></div>';

this.renderer.appendChild(this.divDevice.nativeElement, div);

Gracias de antemano

Saludos

1
  • nose exactamente que es lo que quieres hacer. Pero tu código del click no funciona porque lo estas inyectando dinamicamente. Y le estas poniendo la directiva (click) que es algo propio de angular y no de js. Angular previamente compila todas estas directivas a js que entiende el navegador. Es por eso que no te funciona. Si quieres añadir un event handler lo puedes hacer con addEventListener
    – hawks
    Commented el 13 may. 2020 a las 12:25

1 respuesta 1

1

Despues de que creas el elemento debes agregar el listen con renderer2 de esta manera:

 this.eventoClick = this.renderer.listen(
      document.getElementById("AGREGAR-EVENTO"),
      "click",
      evt => {
        this.removeDevice(evt);
      }
    );

Yo estoy agregando id='AGREGEGAR-EVENTO' a tu botón dentro del string que usas para generar el HTML

Te dejo un ejemplo funcional

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.