Home / Questions / 355186
Accepted
tripossi
Asked: 2020-05-14 01:58:56 +0800 CST 2020-05-14 01:58:56 +0800 CST

inject html code with angular

  • 772

I have a button that every time it is pressed injects an HTML code into a container div. The injected code is the following.

  <div class="row">
    <div class="col-5 mt-2 pr-0">
       <div class="input-group">
          <div class="input-group-prepend">
             <span class="input-group-text inputMini" id="inputGroup-sizing-default">IMEI</span>
          </div>
          <input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default">
       </div>
    </div>
    <div class="col-5 mt-2 pr-0">
       <div class="input-group">
          <div class="input-group-prepend">
             span class="input-group-text inputMini" id="inputGroup-sizing-default">BUZÓN</span>
          </div>
          <input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default">
       </div>
     </div>
     <div class="col-2 pr-0 d-flex-left-center">
        <button class="btn rounded-circle" (click)="removeDevice($event)>
          <em class="fa fa-times"></em>
        </button>
     </div>
  </div>

As you can see, I am adding an element that contains a function call to that injected code.

The elements are painted correctly on the screen for me, but when clicking on the element that contains the call to the removeDevice() function, it never enters that call. Can someone tell me why it doesn't work? Am I injecting the html code correctly?

the code in the component that I have created to inject that code

@ViewChild('addDevice', {static: false}) divDevice: ElementRef;

const div: HTMLDivElement = this.renderer.createElement('div');
div.className = "col-md-12";

div.innerHTML = '<div class="row"><div class="col-5 mt-2 pr-0"><div class="input-group"><div class="input-group-prepend"><span class="input-group-text inputMini" id="inputGroup-sizing-default">IMEI</span></div><input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default"></div></div><div class="col-5 mt-2 pr-0"><div class="input-group"><div class="input-group-prepend"><span class="input-group-text inputMini" id="inputGroup-sizing-default">BUZÓN</span></div><input type="text" class="form-control inputMini" aria-label="Default" aria-describedby="inputGroup-sizing-default"></div></div><div class="col-2 pr-0 d-flex-left-center"><button class="btn rounded-circle" (click)="removeDevice($event)"><em class="fa fa-times"></em></button></div></div>';

this.renderer.appendChild(this.divDevice.nativeElement, div);

Thanks in advance

Cheers

html5

1 Answers

  1. Best Answer

    After you create the element you must add the listenwith renderer2like this:

     this.eventoClick = this.renderer.listen(
      document.getElementById("AGREGAR-EVENTO"),
      "click",
      evt => {
        this.removeDevice(evt);
      }
    );

    I am adding id='AGREGEGAR-EVENTO'to your button inside the string that you use to generate theHTML

    I leave you a working example

    • 1