Effortlessly update the document title from any route. Inspired by react-helmet
- Install
angular-beanie
via npm or yarn.
npm install -S angular-beanie
yarn add angular-beanie
- Inject the beanie module as a dependency to your awesome angular application.
angular.module('my-awesome-app', [
'beanie'
]);
- You're ready to use angular beanie!
The easiest way to change the document title is to simply add the beanie component to any of your component templates.
For instance, the following declaration would would set the document title to Home - My Awesome App
<beanie title="Home - My Awesome App" />
For applications with more than one route, utilizing templates allows us to have a generic site template and modify it slightly for each route.
This can be done by modifying the beanieConfig
during angular's config phase.
angular.module('my-awesome-app', ['beanie'])
.config(function(beanieConfig) {
angular.extend(beanieConfig, {
titleTemplate: '%title% - My Awesome App'
});
});
Using a configured template is as simple as adding a beanie component with the title set to just the value
to replace %title%
in the template.
<beanie title="Home" />
<!-- This would set the document title to 'Home - My Awesome App' -->
For instances when the beanie component is not provided with a title and a title template is configured, the fallback title will be used instead, if configured. This is configured in the same way as the title template.
angular.module('my-awesome-app', ['beanie'])
.config(function(beanieConfig)) {
angular.extend(beanieConfig, {
titleTemplate: '%title% - My Aesome App',
fallbackTitle: 'My Aesome App'
});
});
Adding an empty beanie <beanie />
to a component would now set the title to the fallback title.
Pull requests welcome, unit tests are strongly encouraged.
- Fork and clone the project
- Install the yarn package manager and run
yarn install
- You're good to go!