How to make browser title different from header title

ionic-v1
1

Hi,
I just upgraded from beta 11 to rc-1.

When testing on the desktop browser, the chrome browser tab title always remained the same. It read from my html document title and never changed.

Now I notice that it is tied to my ion-view title value. I have tried the ion-nav-title and view-title but they are always in sync with the browser tab title.

For example, I used to be able to see “XYZ App” on the browser tab title and the header would say “User Account”. Now both show “User Account”. Ideally, the browser tab title would show “XYZ App: User Account”. I have considered changing my header title to say “XYZ App: User Account” but this eats up a lot of header real estate especially since I have buttons on the header too.

Is there a way to manipulate the browser tab title separately from the ion-view title?

Thanks,

Jun

2

Bump

I’m having the same issue as wel.
The HTML I use in my header bar to display an image is also used in the text for the browser tab.
A way to change the text in the browser tab seperate from the header bar text would be awesome

image

3

I’d like to bump this up as well. I checked the docs and I don’t seem to see a way to change this behavior. I’m building a desktop app using Ionic as the UI, and the desktop app is picking up on the title changes.

4

Could you use JavaScript to hook into the changing of the header and change the tag?

5

I ran into the same problem, and found a solution.

If you grep through the ionic source code, you will find that the document title is set like this:

  // Set the document title when a new view is shown
  $rootScope.$on('$ionicView.afterEnter', function(ev, data) {
    if (data && data.title) {
      $document[0].title = data.title;
    }
  });

You can override this in your app, e.g.:

myModule

// Set up custom document title.
.run(function($document, $rootScope) {
  $rootScope.$on('$ionicView.afterEnter', function(ev, data) {
    if (data && data.title) {
      $document[0].title = data.title + ' - my awesome app';
    }
  });
})
6

I tried this but it didn’t work. I tried $document.title, $document[0].title too but no solution yet.

7

You can use Title service from angular

https://angular.io/api/platform-browser/Title