Call component function from dom generated element - angular

Question

I want to create a dynamic number of html dom element buttons and have them be able to call a service when clicked. Is there any way to do that?

For example, test.component.ts:

import {ApiService } from '../services/api.service';
...
export class test implement OnInit(){
    constructor(private apiGet : ApiService) { }
    ngOnInit() {
        ...
        for (i = 0; i < x; i++) {
            var row = document.getElementById('row');
            var cell = insertCell();
            cell.innerHTML = "<button name='" + i + '" (click)=test.callService()>click me</button>";
        }
    }
    public callService() {
        //call ApiService here using buttons name
    }
}

I've been getting it to work when I put the (click) event on an html element inside test.component.html, but it hasn't been working for the dom generated buttons. Is there something I'm missing, or is there a better way to do this?

To dynamically generate elements consider using *ngFor

robert
– robert

2020-03-27 20:53:55 +00:00
Commented Mar 27, 2020 at 20:53 — robert
– robert, Commented Mar 27, 2020 at 20:53

Barremian · Accepted Answer · 2020-03-27 22:13:26Z

1

For dynamically created elements, event handlers have to be defined using addEventListener() method. Also you could manually trigger change detection to make sure the elements are generated in DOM. Try the following

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ApiService } from '../services/api.service';
...
export class test implement OnInit {
  constructor(private apiGet: ApiService, private _cdr: ChangeDetectorRef) { }

  ngOnInit() {
    ...
    for (i = 0; i < x; i++) {
      var row = document.getElementById('row');
      var cell = insertCell();
      cell.innerHTML = "<button id='button" + i + "' name='" + i + '">click me</button>";
    }
    this.addEventListeners(x);
  }

  private addEventListeners(x) {
    this._cdr.detectChanges();    // <-- manually trigger change detection to be sure
    for (i = 0; i < x; i++) {
      const button = document.getElementById('button' + i);
      if (button) {
        button.addEventListener('click', this.callService());
      }
    }
  }

  public callService() {
      //call ApiService here using buttons name
  }
}

Also unrelated, export class test implement OnInit(){ should be replaced with export class test implement OnInit {. The parentheses are not required here.

answered Mar 27, 2020 at 22:13

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5730329 Over a year ago

it doesn't seem pretty though

robert · Accepted Answer · 2020-03-27 21:13:50Z

0

Your html using ngFor

 <div *ngFor="let button of buttons">
     <button (click)="callService(button.name)">{{button.name}}</button>
 </div>

And your component:

  buttons = [
    {
      name: 'one'
    },
    {
      name: 'two'
    }
  ];

  callService(buttonName) {
    alert(`call ApiService here using buttons name: [${buttonName}]`);
  }

Check this stackblitz.

answered Mar 27, 2020 at 21:13

robert

6,1907 gold badges31 silver badges41 bronze badges

Collectives™ on Stack Overflow

Call component function from dom generated element - angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related