This addon provides a helper for changing the title of the page you're on.
ember install ember-page-title
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
Fastboot vs Non-Fastboot Notes
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.
attribute | type | default | description |
---|---|---|---|
separator | string | " | " |
Which separator should be displayed after this instance of {{page-title}}
|
prepend | boolean | true | If the token should be prepended or appended to the list of tokens |
replace | boolean | false | Replace all previous elements with the active |
front | boolean | false | If the token should always be in the beginning of the resulting title. |
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');
});
});
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 ofember-cli-head
. Please remove{{head-layout}}
from your application'sapplication.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