gem-hunter

This addon provides a helper for changing the title of the page you're on.

ember install ember-page-title

• ember-source v4.2 or above

As of v3.0.0 this addon maintains the page title by using the <title> tag in your document's <head>. This is necessary for FastBoot compatibility.

Non-fastboot apps should keep the <title> tag in index.html to ensure that the initial page is valid HTML. The title will be removed and replaced when your app boots.

Fastboot apps MUST remove the <title> tag from index.html. As of v6.0.0 this is done automatically if you use ember install ember-page-title to install this addon. Can also be run manually using ember g ember-page-title to update the title if FastBoot is installed.

Visit the Docs site

The default values for separator, prepend and replace are configurable via config/environment.js:

// config/environment.js

module.exports = function (environment) {
  let ENV = {
    pageTitle: {
      replace: true,
    },
  };

  return ENV;
};

For usage in gts and gjs, the pageTitle helper is exported from the index:

import { pageTitle } from 'ember-page-title';

<template>
  {{pageTitle "About"}}
  
  ...
</template>

If you want to be notified when the page title has been updated, you can extend and override the page-title service and provide your own titleDidUpdate hook. The titleDidUpdate hook receives the new title as its sole argument.

// app/services/page-title.js

import EmberPageTitleService from 'ember-page-title/services/page-title';

export default class PageTitleService extends EmberPageTitleService {
  titleDidUpdate(title) {
    // Do something with the new title.
  }
}

assert the page title with the supplied getPageTitle test helper:

import { getPageTitle } from 'ember-page-title/test-support';

module('Acceptance | Register Page', function (hooks) {
  setupApplicationTest(hooks);

  test('visiting /register', async function (assert) {
    const registerURL = '/register';
    await visit(registerURL);

    assert.equal(currentURL(), registerURL);
    assert.equal(getPageTitle(), 'Register | Some Website');
  });
});

There is nothing to configure as only gjs/gts is supported

If your project uses loose-mode templates, you can merge in the template registry interface provided by ember-page-title,

// <your-app>/types/glint.d.ts
import '@glint/environment-ember-loose';
import '@glint/environment-ember-template-imports';

import type PageTitle from 'ember-page-title/template-registry';

declare module '@glint/environment-ember-loose/registry' {
	export default interface Registry extends PageTitle {
        /* your local loose-mode entries here */
	}
}

Similarly, if you rely on a service registry, you'll want to import ember-page-title's service registry and extend from it.

import type PageTitle from 'ember-page-title/service-registry';

declare module '@ember/service' {
  interface Registry extends PageTitle {
        /* your local service entries here */
  }
}

or, if you wish to manage how the service becomes registered yourself, you may import the service:

import type PageTitle from 'ember-page-title/services/page-title';

• ember-page-title no longer requires the usage of ember-cli-head. Please remove {{head-layout}} from your application's application.hbs route template.
• {{title}} has been removed, please rename to {{page-title}}.

Contributors are welcome! Please provide a reproducible test case. Details will be worked out on a case-per-case basis. Maintainers will get in touch when they can, so delays are possible. For contribution guidelines, see the code of conduct.

To publish documentation, run the following command:

ember github-pages:commit --message "update documentation"
git push origin gh-pages:gh-pages