How to set the page title

Ionic Framework ionic-v3
1

Hi All,

I’m not finding how to set the page title. In normal HTML, it’s…

<html>
    <head>
        <title>Right Here!</title>
    </head>
    <body>
        ...
    </body>
</html>

When I do the following, it shows up momentarily and gets replaced by the default “localhost:8100”.

import { App, NavController, NavParams } from 'ionic-angular';
...
export class MyClass {

    constructor(public _app: App, public navCtrl: NavController, public navParams: NavParams) {
        
    }

    ionViewDidLoad() {
        this._app.setTitle("Page Title Here");
    }

}

Any help is appreciated!

Thanks,
Ryan

1 Like
2

I think you have to make an import that page

3

I think the following code is working fine…

  <ion-title>{{title | uppercase}}</ion-title>

here title is declaration

title : any;

and

this.title = "Page title here";
4

Hi @Arulmano,

I’m a little lost. You’ve declared that variable, so how is it getting set to the page?

1 Like
6

have u tired this above code…

title is your html page variable name

<ion-header>
	<ion-navbar color="secondary">

		<ion-title>{{title | uppercase}}</ion-title>
		<ion-buttons end>
			<button ion-button icon-only (click)="About()">
        <ion-icon name="alert"></ion-icon>
      </button>

		</ion-buttons>
	</ion-navbar>
</ion-header>
7

thank you… i guess my issue is that I’m using images in that tag :slight_smile:

8

are you using ionic 2 or other?

and i have to given code for ionic 2 and angular 2

9

This is my actual header…

<ion-header app-header>
        <ion-navbar>
            <button ion-button menuToggle>
                <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title>
               <img src="../assets/images/logo.png" />
            </ion-title>
        </ion-navbar>
    </ion-header>
10

please try this below code:
<img [src]=“sourceimage” …

11

Ok, I’ve changed it to

    <ion-title>
        <img [src]=_sourceImage />
        <!-- <img src="../assets/images/logo.png" alt="PunchBug" /> -->
    </ion-title>

with the *.ts file having this code added:

public _sourceImage: string;

this._sourceImage = "../assets/images/logo.png";      // in the constructor

but i dont know where i can override the title text.

12

This is correct…
but the variable declaration little changes…please declare _sourceImage as any

ex: _sourceImage : any;

13

Ok, I have.

No changes. =/

14

is it working fine or not?

15

No it still lists the web page’s title (the text in the browser tab) as “localhost:8100”.

16

It’s the browser tab text that I want to override with a message.

17

did you want to change the localhost:8100 address. i don’t understand your issue

18

Thanks for your help.

I just solved it with the following:

HTML

    <ion-title>
        <span class="hiddenText">Browser Tab Title Here!!!</span>
        <img src="../assets/images/logo.png" />
    </ion-title>

SCSS

.hiddenText {
    display: none;
}
19

:slight_smile:
sorry… for i given any wrong codes…

20

that’s alright. you helped me talk through the problem. :slight_smile:

21

Totally worked for me thanks :+1: