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?

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?

• javascript
• angular
• angular6

• Firstable you should forget about this Jquery code in your angular ponent. Why dont you created the button and then hide and show it with *ngIf? – Araldy Commented Sep 6, 2018 at 12:53

4 Answers 4

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.ponent.html',
  styleUrls: ['./app.ponent.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 pile 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");
}