bind to click event to external content when using innerHTML angular

Question

Is it possible to bind to an event which is from external content. Content is brought in via innerHTML

I have the below code whereby I grab external content and display it within my app. I'm trying to listen to an onClick event for the <a> tag. The <a> is a route redirect. The listen should reside within my app as I want do some other things before routing to a new route.

I've tried setting a handleClick function but I don't think this is the correct way to do it.

I also thought maybe using a ElementRef - in this case #view but would jquery light be better in this case.

@Component({
  selector: 'overview-details',
  template: `
    <h2>{{ title }}</h2>
    <div #view [innerHTML]="regCode | sanitizeHtml"></div>
  `
})

ngOninit() {
    this.regcode = `
        <div>
            <h1>RegCode Content</h1>
            <a class="link" (click)="handleClick()">Link</a>
        </div>
    `;
}

//within controller
handleClick(){
    // do some stuff
    // then route
    router.navigate([somewhere....]);
}

Günter Zöchbauer · Accepted Answer · 2017-07-15 14:40:19Z

1

Angular doesn't process HTML added with [innerHTML]="..." or any other way. Bindings like (click)="..." work only when added statically to a comopnents template.

You can use

constructor(private elRef:ElementRef) {}

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('a.link').addEventListener('click', this.handleClick.bind(this));
}

answered Jul 15, 2017 at 14:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fidev · Accepted Answer · 2017-07-18 08:49:26Z

1

I worked out the following in the end.

I added the (click) to the div and also added a data-route to the <a> and can use event.target.dataset.route to get the value.

Just incase anyone else has similar issues

@Component({
  selector: 'overview-details',
  template: `
   <h2>{{ title }}</h2>
   <div (click)="handleClick($event)" [innerHTML]="regCode | sanitizeHtml"></div>
   `
})

ngOninit() {
   this.regcode = `
      <div>
          <h1>RegCode Content</h1>
          <a class="link" data-route="0">Link</a>
      </div>
  `;
}

handleClick(event: any) {
    console.log('fire', event.target.dataset.route);
    if (event.target.dataset.route == 0) {
       router.navigate([somewhere....]);
    } esle {
       router.navigate([somewhereElse....]);
    }
}

edited Jul 18, 2017 at 8:49

answered Jul 15, 2017 at 14:51

fidev

1,2523 gold badges24 silver badges53 bronze badges

Collectives™ on Stack Overflow

bind to click event to external content when using innerHTML angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related