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

Instructions on how to delete a specific tag from a table using its ID

Tips for retrieving the text enclosed within a <span> tag using jQuery

Adding JQuery to a running webpage using the DOM and Opera browser add-ons

Ajax is unintentionally duplicating the request

"I'm looking for a solution on integrating Osano CookieConsent into my Next.js application. Can

What could be the reason for AngularJS directives (such as attributes) appearing as "invalid" in WebStorm 8?

What is the proper way to utilize the name, ref, and defaultValue parameters in a select-option element in React Meteor?

Validating HTML forms using Javascript without displaying innerHTML feedback

Having trouble with getStaticProps serialization error in Next.js?

An alternative to passing AngularJS expressions to PHP or Ajax

Is pl/pgsql block code supported by postgres-nodejs?

After ajax, trigger change event

Utilize React Material UI to elegantly envelop your TableRows

`Using angular-ui-tree: Retrieving the html element of the most recent node that was added`

Increase the progress bar at regular intervals of x seconds

Extract information from a database table for presentation as simple text

Display all elements with a blank attribute using jQuery

"Step-by-step guide on assigning a class to a Component that has been

Error: Unable to access 'target' property as it is undefined in React JS

Unexpected updates occurring in custom Google Sheet functions