How to add an Angular property to an HTML element

Question

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

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.

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>

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 .