Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<ion-title> does not render "toolbar-title" when [innerHTML] is specified

See original GitHub issue

Typical behaviour (Beta 11):

<ion-title>{{ mytitle }}</ion-title>

will output:

<ion-title><div class="toolbar-title">My Ttile</div></ion-title>

But when using:

<ion-title [innerHtml]="myTitle"></ion-title>

The inner DIV “toolbar-title” is not rendered.

Workaround:

<ion-title><div class="toolbar-title" [innerHtml]="myTitle"></div></ion-title>

This ends up generating:

<ion-title><div class="toolbar-title"><div class="toolbar-title">My Title</div></div></ion-title>

Issue Analytics

State:
Created 7 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

5reactions

ekhmoicommented, Oct 4, 2016

Hello again. you can do it like this

<ion-title><span [innerHTML]="myTitle"></span></ion-title>

0reactions

ionitron-bot[bot]commented, Sep 4, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Top Results From Across the Web

<ion-title> does not render "toolbar-title" when [innerHTML] is ...

I am trying to set my own title which includes HTML entities, such as & , which is why I need to specify...

angular2 [innerHTML] not working properly with ionic <ion-list>

I think your problem is related to text-wrap class. I am also facing this problem. here is my code. You can be modified...

ion-title: Ionic Framework App Title Component for Toolbars

Title is a text component that sets the title for a toolbar. It can be used to describe the screen or section a...

Patch - Pagure.io

... +++ b/package.json @@ -119,4 +119,4 @@ "android" ] } -} +} \ No newline at ... Fedora</span> + </ion-title> + <ion-searchbar [(ngModel)]="searchQuery" ......

innerHTML in Javascript - Scaler Topics

innerHTML returns all the elements and their text as well along with the specified spacing, innerText returns only text with no consideration to ......