Click from controller HTML Ionic 2

Question

How i can run function from string in controller in Ionic 2. My code:

export class ProjectsPage {

    text:string = '' ;

    constructor() {
        this.text = '<a (click)="myAlert()">Show allert</a>' ;
    }

    myAlert() {
        alert(1) ;
    }

}

How do you show `this.text` in template? – Duannx Jun 14 '17 at 10:03 — Duannx, Jun 14 '17 at 10:03
I updated the answer. Check it now – Mr_Perfect Jun 14 '17 at 11:38 — Mr_Perfect, Jun 14 '17 at 11:38

Mr_Perfect · Accepted Answer · 2017-06-14T12:04:44.507

You can do this by using DomSanitizationService. Import the service

import {DomSanitizationService} from '@angular/platform-browser';

Now, in class constructor do this

  constructor(sanitizer: DomSanitizationService) {
      this.text = '<a (click)="myAlert()">Show allert</a>' ;
      this.text = sanitizer.bypassSecurityTrustHtml(this.text);
  }

Use like this in template

<div [innerHTML]="text"></div>  // here the DOM will be appended

Have a look at this answer to follow up the updates in the release versions and imports

uksz · Answer 2 · 2017-06-14T09:29:43.757

2

I can only guess what you are asking for, but your mistake is most likely caused by passing string in (click) function. Change is to:

 this.text = '<a (click)="'+this.myAlert()+'">Show allert</a>' ;

This should do the trick.

edited Jun 14 '17 at 09:29

answered Jun 14 '17 at 09:01

uksz

18,239
30
94
161

`Error: Cannot find name 'myAlert'` If i set `this.myAlert()` emulator is hangs – wstudiokiwi Jun 14 '17 at 09:29
how about 'Show allert' ? – uksz Jun 14 '17 at 09:30
if `(click)="'+this.myAlert()+'"` then function cyclically runing on page init – wstudiokiwi Jun 14 '17 at 09:45

Click from controller HTML Ionic 2

2 Answers2