Utilize $stateParams to dynamically generate a title

Question

Utilize $stateParams to dynamically generate a title

When I click a link to our 'count' page, I can pass a router parameter with the following code:

$state.go('count', {targetName: object.name})

The router is set up to recognize this parameter in the URL:

url: '/count/:targetName',

We are using the data: option in UI-Router along with $state to dynamically adjust page titles:

<title ng-bind="'Application Name : ' + $state.current.data.pageTitle"></title>

I want the pageTitle to include the :targetName as well. I attempted to achieve this by setting a function in the data: property of the router like so:

data: {
    pageTitle: function () {
        getTargetName.$inject('$stateParams');
        function getTargetName ($stateParams) {
            return $stateParams.targetName;
        }
    }
}

However, this approach prevents the page from resolving correctly.

Any suggestions or advice?

javascript angularjs angular-ui-router angular-ui

Answer 1

Answer №1

Visit the live Plunker demo

Explore these different states and their dynamic titles:

// Example of a state with a static pageTitle STRING
.state('home', {
    ...
    data: {
       pageTitle: "Just a home page"
    },
})
// Parent state with a URL parameter 'someParam' and a dynamic pageTitle as a function
.state('parent', {
    ...
    url: "/parent?someParam",
    data: {
        pageTitle: function ($stateParams) {
          return `Title with parameter ${$stateParams.someParam}`;
        }
    }
})
// Child state that changes the title
.state('parent.child', { 
    ...
    data: {
        pageTitle: "Just a child title",
    }
})

To display the title in your HTML, use this line of code:

<title>The title is: {{ getTitle() }}</title>

To make it work, we can add a simple evaluation to the $rootScope, or ideally, create a dedicated service for this purpose.

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {

    $rootScope.getTitle = function(){
      var state = $state.current;
      var params = $stateParams;

      if (state.data
      && state.data.pageTitle) {

        if(typeof (state.data.pageTitle) === "function" ){
          return state.data.pageTitle(params);
        }
        return state.data.pageTitle
      }
      return "No title for this state"
    }
}])

Each link will now have its own unique title based on the state:

<a href="#/home">
<a ui-sref="parent({someParam: 1})">
<a ui-sref="parent({someParam: 'someValue'})">
<a ui-sref="parent.child">

See this implementation in action here

Answer 2

Visit the live Plunker demo

Explore these different states and their dynamic titles:

// Example of a state with a static pageTitle STRING
.state('home', {
    ...
    data: {
       pageTitle: "Just a home page"
    },
})
// Parent state with a URL parameter 'someParam' and a dynamic pageTitle as a function
.state('parent', {
    ...
    url: "/parent?someParam",
    data: {
        pageTitle: function ($stateParams) {
          return `Title with parameter ${$stateParams.someParam}`;
        }
    }
})
// Child state that changes the title
.state('parent.child', { 
    ...
    data: {
        pageTitle: "Just a child title",
    }
})

To display the title in your HTML, use this line of code:

<title>The title is: {{ getTitle() }}</title>

To make it work, we can add a simple evaluation to the $rootScope, or ideally, create a dedicated service for this purpose.

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {

    $rootScope.getTitle = function(){
      var state = $state.current;
      var params = $stateParams;

      if (state.data
      && state.data.pageTitle) {

        if(typeof (state.data.pageTitle) === "function" ){
          return state.data.pageTitle(params);
        }
        return state.data.pageTitle
      }
      return "No title for this state"
    }
}])

Each link will now have its own unique title based on the state:

<a href="#/home">
<a ui-sref="parent({someParam: 1})">
<a ui-sref="parent({someParam: 'someValue'})">
<a ui-sref="parent.child">

See this implementation in action here

Utilize $stateParams to dynamically generate a title

Answer №1

Similar questions

Generating a three-level unordered list using arrays and for-loops in JavaScript/JSON

Currently I am developing a Minimax Algorithm implementation for my reversi game using react.js, however I am encountering a RangeError

Running an Express middleware function

Use a filter to narrow down results based on a column containing comma-separated values, as well as another specified

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

Using a table row as a counter in HTML

Create a unique Bitcoin address using a derivation scheme

Javascript Solution for Testing Palindromes in a Linked List

My attempt at deploying my personal React App project on Vercel was unsuccessful

Before beginning my selenium scripts, I need to figure out how to set an item using Ruby in the browser's localStorage

React - Incorrect components experiencing style changes due to setTimeout

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

notify a designated channel when ready for launch

In what scenarios is it more suitable to utilize style over the sx prop in Material-UI?

nested components in AngularJS

Tips for adjusting the positioning of a div element in a responsive design

Triggering jQuery Submit Form when Form is Modified

The jquery selector fails to retrieve all elements

Implement a cron job in Node.js to automatically trigger an Express route on a weekly basis

Using Angular to link Google Places API responses to a form: a guide on merging two different length objects with a shared key