Angular2 - How to render a button with click event dynamically

Question

I have a Web App in Angular2, in which I am using the SmartAdmin template. One of my templates has a datatable.

For each record in the table, I want to have an 'Edit' button.

This is how I did it -

<sa-datatable #countryTable [options]="{
        ajax: 'assets/api/tables/datatables.filters.json',
        columns: [ {data: 'name'}, 
                   {data: 'position'}, 
                   {data: 'office'}, 
                   {data: 'age'}, 
                   {data: 'date'}, 
                   {data: 'salary'}, 
                   {defaultContent: '<button class=\'btn btn-default btn-xs edit-country-btn\' (click)=\'editClicked()\'>Edit</button>' } ] }"
       tableClass="table table-condenced table-striped table-bordered">
    .
    .
    .
</sa-datatable>

The problem is that the button is rendered, but the event is not bound to it. (The HTML is rendered as it is, without Angular2 directives).

I tried rendering the button using render instead of defaultContent. But that doesn't work as well.

EDIT

I tried to get the edit-country-btn elements from the DOM in order to bind them to the event, but I can't seem to fetch them:

In the component -

@ViewChild('countryTable') public countryTable: any;

ngAfterViewInit() {
    var b = this.countryTable.el.nativeElement.querySelectorAll('button');
    console.log(b);
}

The result is a list of buttons, but not the edit buttons that I want.

Community · Accepted Answer · 2017-05-23 12:32:33Z

3

You can bind a click event to the body which will be activated for button elements (or if you want it to be more specific you can use id, class etc.),

document.querySelector('body').addEventListener('click', (event)=> {
      if (event.target.tagName.toLowerCase() === 'button') {
         this.editClicked();
      }
    });

Similar example: https://stackoverflow.com/a/42579935/5706293

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 9, 2017 at 7:44

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2017-03-09 07:21:41Z

2

Angular compiles statically, HTML added at runtime is not processed by Angular.

You can use

querySelector('button').addEventListener('click', editClicked.bind(this))

(after the button was added to the DOM)

answered Mar 9, 2017 at 7:21

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

4 Comments

mridula Over a year ago

I actually did try this, but I can't seem to get the edit button list. See my edit. Is ngAfterViewInit() the right place for this?

Günter Zöchbauer Over a year ago

Perhaps it's not added yet. Try with setTimeout(() => ..., 100).

mridula Over a year ago

This works. but how do I set the timeout such that it is foolproof? Right now, it doesn't work at 100, but works at 1000.

Günter Zöchbauer Over a year ago

Using setTimeout() was just a way to figure out what the problem is. Now it's clear that sa-datatable does async initialization. You can try setTimeout(() => ...) (without a specific delay). If this works I'd just use that. A better way would be if sa-datatable provided an event when it's done initializing. If it doesn't work without a timeout, I'd consider echonax' approach.

Collectives™ on Stack Overflow

Angular2 - How to render a button with click event dynamically

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related