All Projects → ember-cli → Ember Page Title

ember-cli / Ember Page Title

Licence: mit
Page title management for Ember.js Apps

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ember Page Title

ember-cli-daterangepicker
Just a simple component to use bootstrap-daterangepicker.
Stars: ✭ 32 (-81.92%)
Mutual labels:  ember, addon
Ember File Upload
HTML5 file uploads for Ember apps
Stars: ✭ 172 (-2.82%)
Mutual labels:  addon, ember
ember-links-with-follower
Render a set of links with a "follower" line underneath. The follower moves to the active link, matching size and position on the page.
Stars: ✭ 43 (-75.71%)
Mutual labels:  ember, addon
ember-legit-forms
Component for creating flexible forms along with validations.
Stars: ✭ 41 (-76.84%)
Mutual labels:  ember, addon
Ember Socket Guru
Addon for easy integration with Pusher.js, ActionCable, Socket.io and Phoenix Channels
Stars: ✭ 119 (-32.77%)
Mutual labels:  addon, ember
ember-app-scheduler
An Ember addon to schedule work until after the initial render.
Stars: ✭ 67 (-62.15%)
Mutual labels:  ember, addon
Ember Can
Simple authorisation addon for Ember apps
Stars: ✭ 262 (+48.02%)
Mutual labels:  addon, ember
ember-app-shell
No description or website provided.
Stars: ✭ 23 (-87.01%)
Mutual labels:  ember, addon
Ember Attacher
Native tooltips and popovers for Ember.js
Stars: ✭ 69 (-61.02%)
Mutual labels:  addon, ember
Ember Searchable Select
Data-down, actions up select-like menu with searching and tagging capabilities.
Stars: ✭ 38 (-78.53%)
Mutual labels:  addon, ember
Ember Pikaday
A datepicker component for Ember CLI projects.
Stars: ✭ 151 (-14.69%)
Mutual labels:  addon, ember
Ember Basic Dropdown
The basic dropdown you ember app needs
Stars: ✭ 140 (-20.9%)
Mutual labels:  addon, ember
ember-ref-bucket
This is list of handy ember primitives, created to simplify class-based dom workflow
Stars: ✭ 31 (-82.49%)
Mutual labels:  ember, addon
ember-formly
JavaScript powered forms for Ember
Stars: ✭ 24 (-86.44%)
Mutual labels:  ember, addon
ember-best-language
🏳 A FastBoot-enabled addon to detect the best language for your user.
Stars: ✭ 18 (-89.83%)
Mutual labels:  ember, addon
ember-eui
Ember Components for Elastic Eui
Stars: ✭ 22 (-87.57%)
Mutual labels:  ember, addon
ember-audio
An Ember addon that makes working with the Web Audio API super EZ.
Stars: ✭ 33 (-81.36%)
Mutual labels:  ember, addon
ember-contextual-services
Services in Ember are scoped to the app as a whole and are singletons. Sometimes you don't want that. :) This addon provides ephemeral route-based services.
Stars: ✭ 20 (-88.7%)
Mutual labels:  ember, addon
Ember Cli Updater
ember-cli addon to help you update your ember-cli application or addon.
Stars: ✭ 32 (-81.92%)
Mutual labels:  addon, ember
Ember Data Url Templates
an ember-addon to allow building urls with url templates instead of defining buildURL
Stars: ✭ 130 (-26.55%)
Mutual labels:  addon, ember

ember-page-title Ember Observer Score CI

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.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 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 <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.

Digging in

Visit the Docs site

API

{{page-title}} Helper

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.

These defaults are configurable in config/environment.js:

// config/environment.js

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

  return ENV;
};

page-title Service

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.
  }
}

Testing

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');
  });
});

Upgrading notes for 5.x to 6.x

  • 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}}.

Contributing

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.

Publishing Documentation

To publish documentation, run the following command:

ember github-pages:commit --message "update documentation"
git push origin gh-pages:gh-pages
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].