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?

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.