0

I am trying to bind some text and html data in the view file, but the page doesn't open in some devices. i tried to surround html with <div> tag, but still not working. I wanted to know is there any alternative of $sce.trustashtml in angular2 or in ionic 2.

i have added sample code below

<div [innerHTML]="html-variable-from-controller"></div>

i tried [inner-html] also still no luck

any help will be appreciated

Hussain
  • 119
  • 2
  • 3
  • 10
  • What does it mean "doesn't open in some devices"? On what devices it works, on what devices it doesn't? – Andrei Zhytkevich Jul 28 '16 at 14:43
  • Don't do this. Why is the server sending you HTML? If you must, see http://stackoverflow.com/questions/31548311/angular-2-html-binding, or http://stackoverflow.com/questions/33472297/how-to-translate-html-string-to-real-html-element-by-ng-for-in-angular-2. –  Jul 28 '16 at 14:52
  • its working in samsung and asus zenfone but not in redmi – Hussain Jul 28 '16 at 17:39
  • @torazaburo sometimes server needs to sends HTML data. For example, Wordpress JSON API returns HTML data for post content. – Indermohan Singh Jul 28 '16 at 18:28

2 Answers2

3

It happened to my app too. innerHTML attribute was trimming audio and iframe elements, in my case.

I got it working by first creating a local variable for that HTML element as follows: 

<p padding #post_content></p>

Here #post_content creates a post_content local variable.

and then by referencing the particular element using @ViewChild Decorator in TypeScript as follows:

@ViewChild('post_content') post_content;

and assigning the HTML in TypeScript as follows :

this.post_content.nativeElement.innerHTML = this.htmlContent;
Indermohan Singh
  • 611
  • 6
  • 13
3

use ionic tags instead of div, instance:

<ion-content [innerHTML]="html-variable-from-controller"></ion-content>
M.Hajavi
  • 277
  • 4
  • 17