Angular component to set the title of an application from any other component / page
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Angular Beanie

Effortlessly update the document title from any route. Inspired by react-helmet

  1. Installation
  2. The Beanie Component
  3. Using templates
    1. Configuring the title template
    2. Using the template
    3. The fallback title
  4. Contributing
  5. License


  1. Install angular-beanie via npm or yarn.
npm install -S angular-beanie

yarn add angular-beanie
  1. Inject the beanie module as a dependency to your awesome angular application.
angular.module('my-awesome-app', [
  1. You're ready to use angular beanie!

The Beanie Component

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" /> 

Using Templates

For applications with more than one route, utilizing templates allows us to have a generic site template and modify it slightly for each route.

Configuring the title template

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 the template

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' -->

The fallback title

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.

Dev Installation

  • Fork and clone the project
  • Install the yarn package manager and run yarn install
  • You're good to go!