How to set the page title

Hi All,

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

        <title>Right Here!</title>

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!


1 Like

I think you have to make an import that page

I think the following code is working fine…

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

here title is declaration

title : any;


this.title = "Page title here";

Hi @Arulmano,

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

1 Like

have u tired this above code…

title is your html page variable name

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


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

are you using ionic 2 or other?

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

This is my actual header…

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

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

Ok, I’ve changed it to

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

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.

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

ex: _sourceImage : any;

Ok, I have.

No changes. =/

is it working fine or not?

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

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

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

Thanks for your help.

I just solved it with the following:


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


.hiddenText {
    display: none;

sorry… for i given any wrong codes…

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

Totally worked for me thanks :+1: