Inserted text styling

[mmiazzo]

I have the following typescript to insert text into the HTML of a page

document.getElementById('room').textContent = "Room: "+this.roomId;

The HTML:

<ion-header>
  <ion-navbar>
    <ion-title id="room"></ion-title>
  </ion-navbar>
</ion-header>

The text that is inserted, however, ends up being plain black text. How can I get it to match the styling of other titles in the app?

vs.

[leonardoss]

The code below will solve your problem. But I am wondering why you need to update title instead of change this page to a detail room page

<ion-header>
  <ion-navbar>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>

and in TS:

export class MyPage () {
    title: 'Test'

    someMethodToSetTitle () {
        this.title = this.roomId;
    }
}