0

Buenas tardes mi problema es el siguiente: estoy insertando codigo HTML a una pagina de esta forma:

let divsucursal:any=document.getElementById(`Sucursal1`);
let buttonscreate="";


    buttonscreate=`<span class='buttonRoles'>boton <i (click)='eliminarRol(1,1)' class=' fa elimRol fa-times-circle-o' aria-hidden='true'></i></span>`;

divsucursal.innerHTML=buttonscreate;

Entonces hay un icono que le tiene el evento (click), el html se añade pero el evento click no funciona porque se añade de esta forma

introducir la descripción de la imagen aquí

y no me ejecuta el evento click de ese elemento, espero me ayuden les agradeceria mucho

2
  • no puedes añader un evento (click) así porque esto se tiene que compilar a js que pueda entender el nevagador y esto como se añade dinamicamente pues no se compila. Podrias poner el boton en la template y funcionaria. (click) al fin y al cabo es una directiva por lo tanto, sino se compila previamente a un event handler de js no va a funcionar. Puedes usar onclick="mifunc" pero no recomiendo hacer esto porque pierdes el change detection y todas las ventajas de angular.
    – hawks
    Commented el 13 abr. 2020 a las 17:31
  • En Angular, nunca es buena idea tocar directamente el DOM. Angular trabaja con un DOM virtual donde hace todas las operaciones de prerendering y presentación. Te sugiero que, si necesitas renderizar elementos dinamicamente uses ng-template y ng-container.
    – VRoxa
    Commented el 13 abr. 2020 a las 21:43

1 respuesta 1

2

Tal y como comenta @ajuni880 para que funcione el compilado en runtime, es necesario hacerlo en el ngAfterViewInit de Angular

Adjunto un ejemplito de stackblitz para que veas como se hace el binding: https://stackblitz.com/edit/angular-zbsocj?embed=1&file=src/app/app.component.ts

  constructor(private elementRef:ElementRef, private renderer:Renderer2) {}

  public asd(){
    var contentString = 'Click here for more information <button (click)="navigate()">Navigate here</button>'; 
    var boxText = document.createElement("div");
    boxText.innerHTML = contentString;
  }

  public navigate() {
    console.log("eeeehnnananaa");
  }

  ngAfterViewInit() {
    this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { this.navigate();});
  }

En stackoverflow está la respuesta original: https://stackoverflow.com/a/35082441/6329540

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.