2

I am working on an mobile application using Ionic2 and Angular2. I have an API that return json array of strings like below:

{ 
"Go to page <a (click)='redirectToAPage(1)'> something </a>",
"Go to page <a (click)='redirectToAPage(2)'> something else  </a>",
"Go to page <a (click)='redirectToAPage(3)'> something else </a>"
}

When I run *ngFor over this array and I use

<p [innerHTML]="item"></p>

It prints the data well, but it removes (click) event. After passing it through a DomSanitizer Pipe with bypassSecurityTrustHtml function it ignores the event too.

Can anyone help please?

Hamidreza Bayat
  • 103
  • 1
  • 10
  • Angular doesn't parse and doesn't apply binding on your html. – yurzui Apr 24 '17 at 11:42
  • I know that Angular does not do it by default. I need to do it and I think there must be a way. – Hamidreza Bayat Apr 24 '17 at 11:46
  • You can create it dynamically or you can use event delegation to catch event – yurzui Apr 24 '17 at 11:47
  • 1
    See http://stackoverflow.com/questions/43469350/angular-2-stripping-out-click-function-when-using-innerhtml/43469411#43469411 – yurzui Apr 24 '17 at 11:54
  • Please find the below solution https://stackoverflow.com/questions/37901436/angular-2-binding-events-not-working-when-adding-template-as-innerhtml – Surya Jun 08 '17 at 04:47
  • Try to use DomSanitizer (https://angular.io/api/platform-browser/DomSanitizer). There is method called bypassSecurityTrustHtml(). It should preserve you click events as is. – Jviaches Sep 25 '17 at 21:07

0 Answers0