4

I am have a variable which fetches a string from my database and displays it on one of my panels. The text which is fetched contains typical HTML tags such as <b><u><p> etc.

<div [innerHTML]="myVariableWithTags"></div>

This would work when tested with ionic lab but will not run on emulators or real devices.

So my question is what is an alternative of innerHTML for Ionic?

For example my variable myVariableWithTags is the following:

<b>This has to be bold</b> <i>and this italic</i>

I want to do the following:

<div> {{myVariableWithTags}} </div>

and would like to see the panel look like this: This has to be bold and this italic

instead of <b>This has to be bold</b> <i>and this italic</i>

Is this possible?

Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100
  • i am not familiar with ionic but since this is simply angular you should avoid setting `innerHTML`. Usually you add innerHTML stuff like so: `
    {myModelVariable}
    ` while `myModelVariable` is set inside the component and can contain anything. If you want to append HTML code and get this running you should explain the usecase better due to this is mostly a bad practice (not always avoidable but mostly)     – messerbill Jan 12 '19 at 18:44
  • @messerbill Basically if my string contains tags and I assign the content of the div as {{myVariableNameGoesHere}} the text will be displayed but the tags will not apply any effects - they will just appear as characters. I have edited the post above in order to provide a better example. Is this possible to be achieved in another way instead of `innerHTML`? –  Jan 12 '19 at 18:52
  • this looks better than the initial code....have a look here https://angular.io/api/common/NgClass – messerbill Jan 12 '19 at 18:52
  • check out `ngClass` which allows you to dynamically set `css` classes – messerbill Jan 12 '19 at 18:52
  • @messerbill I am aware of `ngClass` however I do not believe this is what I need. I do not know what styles my string may have, so I cannot set them using `ngClass`. I just want to preserve whatever tags the string might have and display the text with the effects and styles. `[innerHTML]` does exactly this, but unfortunately Ionic does not support it. –  Jan 12 '19 at 19:06
  • So, you are basically saying that [this answer](https://stackoverflow.com/a/44759927/1009922) does not work. Does it render the HTML tags as text in Ionic? Do you see an error message? Did you try with `[innerHtml]` (just in case)? – ConnorsFan Jan 12 '19 at 20:05
  • Have you tried just plain javascript? This isn't really a problem that Angular was designed to solve, not saying it can't solve it, but you do have the full power of js at your fingertips. – theMayer Jan 12 '19 at 20:48
  • i'd strongly recommend **not** to make use of plain js in framework contexts as long as it is possible to solve using the framework – messerbill Jan 12 '19 at 20:50
  • You could try give your `div` an **ID** and then you can access it from your Typescript over `document.getElementById("yourID")` then you can change your div content – Jonathan Jan 14 '19 at 08:45

3 Answers3

5

step 1: create a pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

Step 2 : Declare and exports it on app.module.ts

import { SafePipe } from '........';
@NgModule({
    declarations: [
    SafePipe
    ],
    imports: [

    ],
    exports: [
        SafePipe
    ],
    providers: [
    ]
})

step 3: use safe pipe on html file

<div [innerHTML]="myVariableWithTags | safe"></div>
Imon
  • 659
  • 1
  • 4
  • 11
5

InnerHTML Supported in IONIC-4 version

<ion-content padding>
    <div [innerHTML]="data"></div>
</ion-content>

**Don't use inside of "<p>" tag.

Sam Prasanna
  • 131
  • 1
  • 3
0

Wrap myVariableWithTags in a <span>. This worked for me.

alex87
  • 419
  • 3
  • 11