click button from template Angular 6

Question

I have this function:

 windowInfo_(marker, i, data) {
      '<div style="' + this.content_ + '">' +
      '<div>' +
      '<img [src]="' + "'" + this.image + "'" + '"' + ' style="' + this.image_ + '" alt="avatar">' +
      '</div>' +
      '<div style="' + this.details_ + '">' +
      '<div>' +
      '<h5 style="' + this.company_name + '">' + data.company_name + '</h5>' +
      '<i class="fa fa-map-marker" id="' + this.country_city + '">' + data.country + ',' + data.city + '</i>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<button class="' + this.footerListing + '" type="button" (click)="details(data.id_listing)">Explore Trips</button>'
}

details(id) {
    console.log(id)
}

As you can see, I have a button inside this template, and I want when I click it, details function to be triggered. But when I click it, nothing is happening. What do I need to modify in order to trigger the function? Thank you for your time!

Possible duplicate of [How to add click event to dynamically added html element in typescript](https://stackoverflow.com/questions/42692780/how-to-add-click-event-to-dynamically-added-html-element-in-typescript) — Julien Ambos, Mar 04 '19 at 14:07
"As you can see, I have a button inside this template, and when I click it, details function is triggered. But when I click it, nothing is happening.". This sentence makes no sense. — Chrillewoodz, Mar 04 '19 at 14:11
It is rendered, the button too. But when I press it, the function is not triggered. — Tenzolinho, Mar 04 '19 at 14:14
try with a debugger, to check if your `id` is not null; if it's null, it won't print anything & you may think that it's not called — Tushar Walzade, Mar 04 '19 at 14:15
@shadowman_93 I need it because I 'build' the content of `windowInfo` ( `google-maps-api`) from .ts — Tenzolinho, Mar 04 '19 at 14:15
I have an idea, can you please try to assign all genereted things into a variable and console.log that? So you can copy and paste manually. If it wont work, you can see what is the problem. — rcanpahali, Mar 04 '19 at 14:20
@shadowman_93 I tried that, I copy-paste the html inside .html and it's working. So the problem is from inside the template, the button click won't do anything.. — Tenzolinho, Mar 04 '19 at 14:25
**This is not what angular is made for**. Consider using the correct framework for your need, not the popular one. In this case, JQuery is best suited for you. — , Mar 04 '19 at 14:26
May I know why you are creating HTML in .ts, If it is the required then also check this link https://stackoverflow.com/questions/34585453/how-to-bind-raw-html-in-angular2 — Rishi0405, Mar 04 '19 at 14:26
@JulienAmbos I get `ERROR TypeError: Cannot read property 'addEventListener' of null`, because there is no property called `querySelector` inside `nativeElement`. — Tenzolinho, Mar 04 '19 at 14:32
@Tenzolinho when this function is calling? Inside of contructor block or ngOnInit? — rcanpahali, Mar 04 '19 at 14:35
None of these 2... it is called on `(boundsChange)` from `agm-map` — Tenzolinho, Mar 04 '19 at 14:38
@Tenzolinho I think thats why you can't apply your generated code on Template. You should use Renderer to achive this. Example: this.renderer.createElement('div') — rcanpahali, Mar 04 '19 at 14:45
Please check this out: https://angular.io/api/core/Renderer2#createelement — rcanpahali, Mar 04 '19 at 14:46

score 5 · Accepted Answer · answered Mar 04 '19 at 14:44

5

You can do this by using HostListener:- Just assign id to your button (i.e. <button id="your_button_id">Click</button>)

Now use HostListener to detect click event:-

@HostListener('click', ['$event'])
onClick(event) {
    if (event.target.id === 'your_button_id') {
        details(id);
    }
}

answered Mar 04 '19 at 14:44

Uttam Kumar Mishra

122
1
8

This is working, but how can I send the `id` inside this `onClick()` function, from `windowInfo_` function? – Tenzolinho Mar 04 '19 at 14:56
I managed to do this using a global variable (inside `windowInfo_` I stored the current id inside this global variable) and sent it to `onClick` function. Thank you very much. – Tenzolinho Mar 04 '19 at 16:03

click button from template Angular 6

1 Answers1