Ion-title and html page title

Ionic Framework ionic-v3
1

I have an ion-navbar with an ion-title set to what I want to display as the title in the navbar, but I would like to de-couple this from the HTML page title so that I can set the page title to something different.

For example, if the application name is AppName and the ion-title text is PageCategory, I would like Chrome and other web browsers to display the page title as PageCategory - AppName.

Is the only way to do this to not use ion-title? If I change this:

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

to this

<ion-header>
	<ion-navbar>
		<div start class="toolbar-title">{{ title }}</div>
		...

The navbar looks the same, but the page title gets set to nothing (so it shows localhost:8100).
I tried using the Angular2 Title service, but it didn’t seem to get set at all that way. Suggestions?

1 Like
2

The app will end up wrapped in a headless WebView yes? Why would the page title matter if that’s the case?

If you really want to do it, I suppose a simple document.title = should do it.

3

Not sure what you mean by headless WebView.

There are plenty of reasons why in a desktop web application, one would want more information in the page title than in the Navbar title. For example, in Google Inbox, the Navbar title may be Inbox while the page title is Inbox - your@email.address.

Haven’t tried document.title yet. I tend to shy away from using document or window directly in Angular 2 apps.

4

document.title did nothing. I can’t seem to find a way to set the HTML title to something other than what is set in <ion-title>. Anyone have another suggestion?

image

1 Like
5

I’m having some issues with this too. There really should be an option to control where or not <ion-title> sets the document title.

The reason I can’t simply ignore is it as another commenter suggest is that I’m making a web app which must function in the browser as well as a native deployment.

My current workaround is that Ionic 2 only sets the document title to the content of <ion-title> if it’s contained in an <ion-navbar>, so I simply changed the tag to <ion-toolbar>. Maybe this will be helpful to you.

6

+1 for this. I understand that the page title doesn’t matter in a headless WebView…

But we’re releasing our App not only for Android and iOS but also as progressive WebApp (by the way perfectly working even in Microsoft Edge) and additionally for Windows and macOS packaged in Atom Electron.

In Electron this even results in the native window title being renamed to the view’s title. OK, we could preventDefault() that in Electron but that leaves us with the WebApp problem.

By the way if I open an UserEdit view the title is set to “User edit” and I could live with a title like “App name > User edit” but the really annoying thing is, that if I open a modal “Please select country”, the title remains “Please select country” even after returning to the “User edit” view.

7

There is a simple solution for this problem (works for ionic-angular@2.0.0-rc.1): For all affected pages, add a reference to App in the constructor and set the page title on view enter. Your HTML ion-header remains as usual (referencing the title property).

import { App } from "ionic-angular";

export class MyPage {

    title = "Navbar Title";

    constructor(private _app: App) {
    }

    ionViewDidEnter() {
        this._app.setTitle(this.title + " - App Name");
    }
}
9 Likes
8

That works thanks.

Any idea why does it have to be specifically invoked on “ionViewDidEnter” ? Using it with “ionViewDidLoad” didn’t work for me.

9

doesn’t work for me … what works is using

File: app.module.ts

import { Title }  from '@angular/platform-browser';

...
  providers: [
    Title
  ],

Inside a page:

import { Title }     from '@angular/platform-browser';

  public constructor(private titleService: Title ) { }

  someMethod(){
    this.titleService.setTitle ('An Awesome Title');  
  }
8 Likes
10

+1 to @arlevi ! This works perfectly for me on Ionic v3