How to bind on click event on dynamically created button in Angular 6?

Question

I am trying to create a dynamic button with an onclick event. The showname() defined the on same Component.ts. But there is no response on clicking the button

Component.ts

createtooltip() {
  this.tooltip = document.createElement('div');
  this.tooltip.style.cssText =
    'position:absolute; background:black; color:white; padding:4px;z-index:10000;' +
    'border-radius:2px; font-size:12px;box-shadow:3px 3px 3px rgba(0,0,0,.4);' +
    'opacity:0;transition:opacity 0.3s';
  this.tooltip.innerHTML = '<button id="popup" (click)="showname()" >Copy!</button>';
  document.body.appendChild(this.tooltip);
}

showname() {
  console.log("Hi User");
}

Could anyone help me to find the solution?

Answer 1

You won't have access to the document object everywhere.

So, you shouldn't be using document functions to do DOM manipulations. All these DOM Manipulations should be done only using Rendere2. If there's anything that you want to access on the DOM, you should do it using @ViewChild

Here's an Example:

import { Component, Renderer2, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  @ViewChild('tooltip') tooltip: ElementRef;

  constructor(private renderer: Renderer2) {}

  createtooltip() {
    this.renderer.setAttribute(this.tooltip.nativeElement, 'class', 'my-button');

    const button = this.renderer.createElement('button');
    this.renderer.setProperty(button, 'id', 'popup');
    this.renderer.setProperty(button, 'innerText', 'Copy');
    this.renderer.listen(button, 'click', (event) => {
      this.showname();
    })

    this.renderer.appendChild(this.tooltip.nativeElement, button);
  }

  showname() {
    console.log("Hi User");
  }

}

In template:

<button (click)="createtooltip()">Create Tooltip</button>

<div #tooltip>

</div>

In CSS:

p {
  font-family: Lato;
}

.my-button {
  position:absolute;
  background:black;
  color:white;
  padding:4px;
  z-index:10000;
  border-radius:2px;
  font-size:12px;
  box-shadow:3px 3px 3px rgba(0,0,0,.4);
  opacity:0;
  transition:opacity 1s linear;
}

Here's a Sample StackBlitz for your reference.

Answer 2

I solved this problem by the other way

<a ngFor="let link of links" (click)="actions[link]()">Click</a>

` actions: any = {

link1: () => this.func1(),
link2: () => this.func2()

} `

Answer 3

angular doesnt compile the dynamic created HTML elements . u have to use ng-template like this :

<ng-template #myTemplate>
    <div styles="...">
       <button id="popup" (click)="showname()" >Copy!</button>
    </div>
</ng-template>

Answer 4

It would be better to create the button with directs like *ngFor or *ngIf rather than create the elements like you do with Jquery .

This is due to the nature of Angular, which prioritizes and eases the usage of directives over simple javascript.

to do this you can :

HTML :

<button id="popup" (click)="showname()" *ngIf='elements.showNameButton==true' >Copy!</button>

** TS :**

elements={
 showNameButton:false
}

createtooltip(){
 this.elements.showNameButton =true;
}

showname() {
  console.log("Hi User");
}