How to bind a click event/function in innerHTML Angular 2?

Question

I have an innerHTML as below:

getWidgetItem(widgetId: any) {
      this._widgetId = widgetId;
      this.widgets = [{'name': 'Welcome'}, {'name': 'Welcome1'}, {'name': 'Welcome2'}];
      this.newArray = this.widgets.map((obj) => {
        let htmlText = `
          <div>
            <section class="page subpage dashboard dashboard-page" style="overflow-y:hidden;">
                <div class="newDashbaord">
                  <header>
                      <div class="actions">
                          <button class="control-btn borderless close-btn">
                              <span #target class="icon-close action-icon" (click)="RemoveWidget(${obj})"></span>
                          </button>
                      </div>
                      <h1 class="table-heading">${obj.name}</h1>
                  </header>
                    <main>
                    </main>
                </div>
            </section>
          </div>`;
          return htmlText;
      });
  }

But the problem is, I cant access the click event from my span.

I have a function call as below:

private RemoveWidget(widget:any) {
    if (typeof widget != 'undefined' && typeof this.widgets != 'undefined'){
      console.log('CALLEDe', widget);
      let index: number = this.widgets.indexOf(widget);
      if (index !== -1) {
          this.widgets.splice(index, 1);
      }
    }
  }

I tried:

ngAfterContentInit(): void {
        // console.log('target called', this.elementRef.nativeElement.querySelector('span'));
        this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => {
            console.log('event called??', event);
            // this.RemoveWidget(event);
        });
  }

But am getting a span from my templateUrl. Cant access the span in my innerHTML span. How can I access it?

Indraft

Why do you have click on span. Wrap the span in a button and place the click on that – Bouilli

i tried with button but somehow i cant find my button in my html through inspect element from my browser. – Indraft

But thats not the problem here – Indraft

If I understand it correctly, you want to invoke RemoveWidget function on a button click from screen. Where exactly are you facing issue with this – Bouilli

Don't program this way. Angular is not jQuery. – Sullivan

You can remove (click)="RemoveWidget(${obj})" and #target from your HTML string because it won't do anything at all. Angular doesn't process HTML added dynamically. this.elementRef.nativeElement doesn't replace it because it listens on the component itself which doesn't seem to be what you want. – Fellers

But I need to pass the obj into my function. So that I can process it.. – Indraft

Any suggestions Gunter? – Indraft

Actually something is really wrong.. – Indraft

Answer 1

You really should use angular's templating engine.

Instead of trying to add the html via script, you could achieve your desired outcome simply with the following in straight html with the use of *ngFor.

some-file.html

<div *ngFor="let widget of widgets">
  <section class="page subpage dashboard dashboard-page" style="overflow-y:hidden;">
    <div class="newDashbaord">
      <header>
        <div class="actions">
          <button class="control-btn borderless close-btn">
            <span #target class="icon-close action-icon" (click)="RemoveWidget(widget)"></span>
          </button>
        </div>
        <h1 class="table-heading">widget.name</h1>
      </header>
      <main>
      </main>
    </div>
  </section>
</div>

The NgFor directive instantiates a template once per item from an iterable. The context for each instantiated template inherits from the outer context with the given loop variable set to the current item from the iterable.

Eyetooth