Inserted text styling


#1

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?

guest

vs.

romtitle


#2

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 :thinking:

<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;
    }
}