ember-page-title 
This addon provides a helper for changing the title of the page you're on.
Installing via ember-cli
ember install ember-page-title
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
Fastboot vs Non-Fastboot Notes
#### Post Install Setup Notes
As of v3.0.0 this addon maintains the page title by using the `` tag in your document's `<head>`. This is necessary for [FastBoot](https://github.com/tildeio/ember-cli-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.
</details>
<h3>Digging in</h3>
<p><a rel="noreferrer nofollow" target="_blank" href="https://ember-cli.github.io/ember-page-title/">Visit the Docs site</a></p>
<h3>API</h3>
<h4><code>{{page-title}}</code> Helper</h4>
<table>
<thead>
<tr>
<th>attribute</th>
<th style="text-align: left;">type</th>
<th style="text-align: left;">default</th>
<th style="text-align: left;">description</th>
</tr>
</thead>
<tbody>
<tr>
<td>separator</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;"><code>" \| "</code></td>
<td style="text-align: left;">Which separator should be displayed <em>after</em> this instance of <code>{{page-title}}</code></td>
</tr>
<tr>
<td>prepend</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">If the token should be prepended or appended to the list of tokens</td>
</tr>
<tr>
<td>replace</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">Replace all previous elements with the active</td>
</tr>
<tr>
<td>front</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">If the token should always be in the beginning of the resulting title.</td>
</tr>
</tbody>
</table>
<p>The default values for <code>separator</code>, <code>prepend</code> and <code>replace</code> are configurable via <code>config/environment.js</code>:</p>
<pre><code class="language-javascript">// config/environment.js
module.exports = function (environment) {
let ENV = {
pageTitle: {
replace: true,
},
};
return ENV;
};</code></pre>
<p>For usage in <code>gts</code> and <code>gjs</code>, the <code>pageTitle</code> helper is exported from the index:</p>
<pre><code class="language-gjs">import { pageTitle } from 'ember-page-title';
<template>
{{pageTitle "About"}}
...
</template></code></pre>
<h3><code>page-title</code> Service</h3>
<p>If you want to be notified when the page title has been updated, you can extend and override the <code>page-title</code> service and provide your own <code>titleDidUpdate</code> hook. The <code>titleDidUpdate</code> hook receives the new title as its sole argument.</p>
<pre><code class="language-javascript">// 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.
}
}</code></pre>
<h3>Testing</h3>
<p><code>assert</code> the page <code>title</code> with the supplied <code>getPageTitle</code> test helper:</p>
<pre><code class="language-javascript">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');
});
});</code></pre>
<h3>TypeScript and Glint</h3>
<p>If your project uses loose-mode templates, you can merge in the template registry interface provided by ember-page-title, </p>
<pre><code class="language-ts">// <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 */
}
}</code></pre>
<p>Similarly, if you rely on a service registry, you'll want to import ember-page-title's service registry and extend from it.</p>
<pre><code class="language-ts">import type PageTitle from 'ember-page-title/service-registry';
declare module '@ember/service' {
interface Registry extends PageTitle {
/* your local service entries here */
}
}</code></pre>
<p>or, if you wish to manage how the service becomes registered yourself, you may import the service:</p>
<pre><code class="language-ts">import type PageTitle from 'ember-page-title/services/page-title';</code></pre>
<h3>Upgrading notes for 5.x to 6.x</h3>
<ul>
<li><code>ember-page-title</code> no longer requires the usage of <code>ember-cli-head</code>.
Please remove <code>{{head-layout}}</code> from your application's <code>application.hbs</code> route template.</li>
<li><code>{{title}}</code> has been removed, please rename to <code>{{page-title}}</code>.</li>
</ul>
<h1>Contributing</h1>
<p>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 <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ember-cli/ember-page-title/blob/master/CODE_OF_CONDUCT.md">code of conduct</a>.</p>
<h3>Publishing Documentation</h3>
<p>To publish documentation, run the following command:</p>
<pre><code class="language-bash">ember github-pages:commit --message "update documentation"
git push origin gh-pages:gh-pages</code></pre></div>
</div>
<div class="footer">
<ul class="body">
<li>© <script>
document.write(new Date().getFullYear())
</script> Githubissues.</li>
<li>Githubissues is a development platform for aggregating issues.</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/githubissues/assets/js.js"></script>
<script src="/githubissues/assets/markdown.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script>
<script>
hljs.highlightAll();
</script>
</body>
</html>