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

[Diodeus]

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>

[ekhmoi]

I guess that is exactly what should happen.
what is your expectation ?

[Diodeus]

I would expect it to output this:

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

Or to simply leave it alone and allow be to do this:

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

But when I do that, I get two nested "toobar-title" DIVs, which doesn't make any sense and prevents being able to use align-title.

[ekhmoi]

I dont think that is correct to expect that behaviour:)

{{ mytitle }} is string Interpolation, which outputs text
[innerHtml] is property binding, you bind its innerHtml to whatever is inside quotes
so when you do
<ion-title [innerHtml]="myTitle"></ion-title>
ionic creates
<ion-title><div class="toolbar-title"></div></ion-title>
and then does something like this
$('ion-title').html('My Ttile');
or
document.getElementsByTagName('ion-title')[0].innerHTML = 'My Ttile';
that is why the result became
<ion-title>My Ttile</ion-title>

IMHO- that is perfectly correct behaviour

anyway, i'll wait till someone from ionic team writes comment :)

[manucorporat]

@Diodeus exactly, @ekhmoi you are right.

This is the expected behavior, avoid using innerHTML. what are you trying to do?

Closing this, since this is more like a question than an issue.

[Diodeus]

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

[ekhmoi]

Hello again.
you can do it like this

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

[ionitron-bot[bot]]

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.