Reputation: 2645
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.
Upvotes: 2
Views: 3242
Reputation: 109
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.
Upvotes: 4
Reputation: 1073
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>
Upvotes: 1