Angular - Using Optional Parameter in Title

Question

How can use the optional parameter from my angular route in the title.

So I want textToSearch to appear in the title:

.when('/search/:textToSearch',
    {
      title: 'Searching' + textToSearch,
      templateUrl: 'views/search.html',
      controller: 'searchController'
    }
  )

And i'm setting title in routeChangeSuccess:

$rootScope.$on('$routeChangeSuccess', function() {
          //Set the <title> tag
          if (!$route.current.title) {
            document.title = 'Default Generic Title';
          } else {
            document.title = $route.current.title;
          }
}

How do you use `title`? Like this http://stackoverflow.com/questions/26308020/how-to-change-page-title-in-angular-using-routeprovider/26308083#26308083 ? — dfsq, Feb 13 '17 at 14:49

score 1 · Accepted Answer · answered Feb 13 '17 at 15:01

1

I would use a placeholder for your route params in title string and interpolate it against route params object:

.when('/search/:textToSearch', {
  title: 'Searching {{ textToSearch }}',
  templateUrl: 'views/search.html',
  controller: 'searchController'
})

Interpolation part (make sure to inject $interpolate service):

$rootScope.$on('$routeChangeSuccess', function() {
  //Set the <title> tag
  if (!$route.current.title) {
    document.title = 'Default Generic Title';
  } else {
    document.title = $interpolate($route.current.title)($route.current.params);
  }
})

answered Feb 13 '17 at 15:01

dfsq

191,768
25
236
258

That ``title: 'Searching {{ textToSearch }}',`` doesn't seem to work – userMod2 Feb 13 '17 at 15:22
Should work, I tested ;) Make sure you inject $interpolation service. Do you have errors? – dfsq Feb 13 '17 at 15:25
Ah yes forgot to inject the service! – userMod2 Feb 13 '17 at 15:36

Angular - Using Optional Parameter in Title

1 Answers1