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

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.

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()

} `

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>

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");
}