Onclick event not working in dynamic html string in angular 6

Question

I'm trying to manipulate the dynamic html string by adding onclick event and button class to it. But unfortunately its not working in Angular 6 but its working perfect with Angular 1 and Javascript...

Below is my code.

  getUnitTestmethod() {

    const htmlObject = document.createElement('div');
    htmlObject.innerHTML = this.unit;
    const btnClarify = htmlObject.getElementsByClassName('customizeclarify');

    let j = btnClarify.length;
    let parentclr;
    let currInputElmclr;
    while (j--) {
        const countNo = 0;

        currInputElmclr = this.renderer.createElement('button');
        this.renderer.setProperty(currInputElmclr, 'id', 'popup');
        this.renderer.setProperty(currInputElmclr, 'innerText', 'TestButtonText');
        this.renderer.setProperty(currInputElmclr, '(click)', 'ShowAlert()');
        this.renderer.setProperty(currInputElmclr, 'class', 'btn btn-success');

        parentclr = btnClarify[j].parentNode;
        parentclr.insertBefore(currInputElmclr, btnClarify[j]);
        parentclr.removeChild(btnClarify[j]);

      }
      this.unit = htmlObject.innerHTML;
}

Answer 1

As @amansoni211 mentioned, you could create a directive and add a hostlistener to it. Coming back to your setup, if you want add event listener to your target, you can do it by this.renderer.listen('click', target);.