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
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 conaddEventListener