How do I use HTML wrapped in text quotes inside of Ionic ion-text

Question

I am receiving a string from the API

textInsert = "<p>Hello</p><br><p>There</p>"

I wish to use the with

  <ion-text color="secondary">
    {{textInsert}}
  </ion-text>

How would I convert the string to

<p>Hello</p><br><p>There</p>

to use in the ion-text

@TimRoberts I don't use Ionic, but I'm guessing they're seeing the HTML tags literally, rather than having them rendered. This is presumably a XSS protection. — Barmar
– Barmar, Commented Aug 27 at 18:33
ion-text uses html inside the > <. If just use a string it just displays the string. If use <ion-text color="secondary"> Hello There</ion-text> directly it displays properly. This was not my first choice but this is the only thing the API can send textInsert = "Hello There" — Thomas Degroot
– Thomas Degroot, Commented Aug 27 at 18:58

twinkle nights · Accepted Answer · 2025-08-28 07:22:00Z

1

In Ionic, the <ion-text> component is mostly a wrapper that applies Ionic’s theming to text—it doesn’t parse or render raw HTML strings automatically. So if you try something like this:

<ion-text>
  "{{ '<b>Bold</b>' }}"
</ion-text>

…it will just display "Bold" as text, not bold text.

✅ Correct way: Use Angular’s property binding with [innerHTML] if you want to render HTML inside ion-text:

<ion-text [innerHTML]="htmlContent"></ion-text>

And in your component:

htmlContent = '<b>This is bold text</b> and <i>this is italic</i>';

answered Aug 28 at 7:22

twinkle nights

211 bronze badge

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

Comments

Thomas Degroot · Accepted Answer · 2025-08-28 15:57:57Z

0

Here is what I found that works. ionic no longer supports sanitizers, use Angular and [innerHTML]. Then insert into label, div etc..

.ts

import { DomSanitizer } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';

export class HelpPage {
  sanitizer = inject(DomSanitizer);

textInsert = "<p>Hello</p><br><p>There</p>"

.html

<ion-text [innerHTML]="sanitizer.bypassSecurityTrustHtml(textInsert)" ></ion-text>

edited Aug 28 at 15:57

answered Aug 28 at 2:52

Thomas Degroot

5281 gold badge17 silver badges45 bronze badges

Collectives™ on Stack Overflow

How do I use HTML wrapped in text quotes inside of Ionic ion-text

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related