How to add an Angular property to an HTML element

I need to know how to add to an html button the property (click) = function() of angular through Javascript.

(click) = function()

Note: I cannot modify the HTML, I can only add the property through JavaScript.

I tested with addEventListener and it works by adding the common JavaScript click = "function" event, but not the (click) of Angular.

click = "function"

(click)

I attach the code:

import Component, OnInit from '@angular/core';

@Component(
selector: 'app-iframe',
templateUrl: './iframe.component.html',
styleUrls: ['./iframe.component.scss']
)
export class IframeComponent implements OnInit
constructor()

ngOnInit()


capture()
let button = document.getElementById('cancelButton').addEventListener('(click)', this.cancel.bind(Event));


cancel()
console.log('Cancelled');




And the HTML here:

<div class="row text-center pad-md">
<button id="acceptButton" mat-raised-button color="primary">OK!</button>
<button id="cancelButton" mat-raised-button>Cancel</button>
</div>


addEventListener("click", this.cancel.bind(this))

1 Answer
1

As stated by the author, the event need to be attached dynamically to the DOM element that is created after a request, so you can use Renderer2
to listen for the click event. Your code should look like this:

import Component, OnInit, Renderer2 from '@angular/core';

@Component(
selector: 'app-iframe',
templateUrl: './iframe.component.html',
styleUrls: ['./iframe.component.scss']
)
export class AppComponent implements OnInit
name = 'Angular';

constructor(private renderer: Renderer2)

ngOnInit()

capture()
const button = document.getElementById('cancelButton');
console.log(button);
this.renderer.listen(button, 'click', this.cancel);


cancel()
console.log('Cancelled');




There's a functional example here.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.