Angular2 - catch/subscribe to (click) event in dynamically added HTML
Declarative event binding is only supported in static HTML in a components template.
If you want to subscribe to events of elements dynamically added, you need to do it imperatively.
elementRef.nativeElement.querySelector(...).addEventListener(...)
or similar.
If you want to be WebWorker-safe, you can inject the Renderer
constructor(private elementRef:ElementRef, private renderer:Renderer) {}
and use instead
this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => { handleClick(event);});
to register an event handler.
I had problems importing ElementRef in my service and did not want to pass Renderer reference there. This Service is about showing 'Loading...' dialog where after 3 seconds dynamic close button is attached. I found solution how to add click event for this button using jQuery. Hopefully this helps someone.
(1) Add jQuery to Angular 2 index.html file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
(2) Declare $
declare var $: any;
(3) Use jQueryThis is piece of code from my service:
public async present() { this.isLoading = true; return await this.loadingController.create({message: 'Loading...'}).then(a => { a.present().then(() => { setTimeout(() => { a.message += '<ion-icon name="close-circle" class="alert-cancel-button"></ion-icon>'; // Here starts jQuery usage $(a).click((clickedObject) => { if ($(clickedObject.target).hasClass('alert-cancel-button')) { this.dismiss(); } }); }, 3000); }); }); } public async dismiss() { return await this.loadingController.dismiss(); }
- By the way
$('alert-cancel-button').click(() => this.dismiss())
didn't work.