Bind a click function to innerhtml with ionic

Question

I would like to link to other ionic pages with [innerHtml].

For example i want to pass the following code to the app with [innerHtml]:

<a (click)="goto('10')">Ipsum</a>

I know that this wont work because security. But how else can i generate dynamic code with ionic and angular 4?

Could you show me an example what options I have?

It's a hacky app i use google sheets as backend.

Martin Chuka · Accepted Answer · 2019-01-02 02:34:54Z

4

In case of anyone else with the same issue

you can run your angular 4 goto function using [innerHTML]

<a class="next-page" data-id="10">Ipsum</a>

and then call attachNextPageListener on ngAfterViewInit()

   private attachNextPageListener(){
    const pageElements=document.getElementsByClassName('next-page');
    if(pageElements && pageElements.length){
      for(let i=0; i<pageElements.length; i++){
        const goto=pageElements[i].getAttribute('data-id');
        pageElements[i].addEventListener('click',()=>{
          this.goto(goto);
          // run your angular code here with goto
        });
      }
    }
  }

then finally to allow the data-id, you can make a pipe with bypassSecurityTrustHtml or use it like Ondra answer.

answered Jan 2, 2019 at 2:34

Martin Chuka

1092 silver badges5 bronze badges

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

Comments

Ondra Koupil · Accepted Answer · 2017-11-20 16:21:51Z

1

You can bind a string to element's [innerHtml]. Angular will sanitize the code and remove any potentially unsafe parts. If it does so, a message will be logged to console.

<div [innerHtml]="someHtmlCode"></div>

If the code gets oversanitized and Angular clears some part that you want to keep, then you have to explicitly mark it as 'potentially unsafe', letting Angular know that you are aware of potential risks. Use DomSanitizer class' bypassSecurityTrust*() methods.

// component.ts
constructor(private sanitizer: DomSanitizer) {
}

public getHtmlWithBypassedSecurity(code: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(code);
}    

// component.html
<div [innerHTML]="getHtmlWithBypassedSecurity(someHtmlCode)"></div>

answered Nov 20, 2017 at 16:21

Ondra Koupil

1,0816 silver badges11 bronze badges

5 Comments

olivier Over a year ago

Thanks Ondra, but the function does not run with this. i tried this before.

Ondra Koupil Over a year ago

Oh, now I see. You need to run the goto function... I don't think this can work, since angular templates are precompiled and cannot be dynamically changed during runtime, so any angular stuff in dynamically added code will not be compiled. Only good old HTML can be injected like that.

Ondra Koupil Over a year ago

Try using event bubbling. Add (click) handler on the wrapping div (the one with [innerHtml] on it). Pass it $event argument. In your component's code, you'll be able to extract "target" property from the $event that points to the clicked element, and somehow perform the required action, run "goto" method. You can use custom data-* attributtes to bind some data to the links, or read the link's href attribute and get required target from that. it is not very angularish, but it should work.

ElDiabolo Over a year ago

@OndraKoupil is there another way? I directly paste in my html from database. In this html there is a onclick attribute. Can´t I modify my .ts to get my .ts (onclick) function working?

Ondra Koupil Over a year ago

@ElDiabolo I don't think there is any clean solution for this. The code in onclick attribute does not know it is injected into angular app and can call only plain JS functions. Only mean of communication between your app and this kind of code I can think of is to export some function in your .ts code (window['someFunction'] = function() {...} ) and in onclick attribute, call that someFunction. However it is extremely hackish and unsafe. And also it won't trigger component redraw or update data bindings.

Collectives™ on Stack Overflow

Bind a click function to innerhtml with ionic

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related