Setting page title after activation in Aurelia

Question

I am trying to set the title, however in this code below it works in one place and doesnt in other place. I want to get the product name and set the title. Is there any other way to do it?

activate(params: any, route, navigationInstruction) {       
        //route.navModel.router.title="test"; //works here
         this.api.pull<Product>([params.id]).then(items => {
                items.forEach(item=>
                {
                    if(item.id == params.id)
                        route.navModel.router.title = item.name //does NOT work here
                });

         });
    }

try `return this.api.pull`, looks like title is set after activate hook, so you have to set `route.navModel.router.title` before activate hook finish execution — valichek, Jun 06 '16 at 17:50
@valichek Thanks, Can you please add this to the answer, so I can mark it. — genericuser, Jun 06 '16 at 19:14

Matthew James Davis · Answer 1 · 2016-06-07T17:12:35.400

6

Try using the setTitle method on the NavModel:

activate(params, routeConfig) {
  return this.api.pull<Product>([params.id]).then((items) => {
    let item = items.find((item) => item.id == params.id);
    if (item) {
        routeConfig.navModel.setTitle(item.name);
    }
  }
}

In the case above, you're pulling down a Product and then setting the page title to the item's name. In this use case, you'd likely want to set the navModel title. However, if you really want to change the Router title and not just the current navModel, you can do the following:

import { inject, Router } from 'aurelia-framework';

@inject(Router)
export class MyViewModel

    constructor(router) {
        this.router = router;
    }

    activate(params, routeConfig) {
      return this.api.pull<Product>([params.id]).then((items) => {
        let item = items.find((item) => item.id == params.id);
        if (item) {
            this.router.title = item.name;
            this.router.updateTitle();
        }
      }
    }
}

See more info in the Router docs.

edited Jun 07 '16 at 17:12

answered Jun 06 '16 at 20:05

Matthew James Davis

12,134
7
61
90

This changes the NavModel Title. I am looking to change the router title. Thanks! – genericuser Jun 07 '16 at 16:41
I've updated my answer, please check it and mark this as correct. :) – Matthew James Davis Jun 07 '16 at 17:13
when I am getting route from the activate method, why should I inject the router object separately. can you please explain the advantage of doing it this way? – genericuser Jun 07 '16 at 18:26
the first reason is that it is simply a best practice. anyone else reading your code will know exactly what you're doing and how you're doing it. the next, and possibly more compelling reason, is that `router` is not a property of `navModel` (see here: http://aurelia.io/docs.html#/aurelia/router/1.0.0-beta.1.2.2/doc/api/class/NavModel), and so you can't expect router to always be there. – Matthew James Davis Jun 07 '16 at 18:50
please double check to see if this answer works for you, and accept and upvote it if so, thanks! – Matthew James Davis Jun 13 '16 at 21:43
1

the accepted answer is not only misinformation, but the code is a straight copy / paste of the non-working code in the question – Matthew James Davis Jun 16 '16 at 01:04
this.router does not have property named title. secondly, check this -> http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.2.4/doc/article/cheat-sheet/7 – genericuser Jun 16 '16 at 01:59
yes, thats what I am using, the route parameter used in activate method. And there is no property called title for the router that is injected. – genericuser Jun 16 '16 at 03:35
The documentation for the router has moved to here: http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration – martin Apr 06 '17 at 13:33

score 0 · Accepted Answer · answered Jun 06 '16 at 19:32

Try to return promise from api call, looks like page title is set after activate hook, so you have to set route.navModel.router.title before activate hook finishes execution

activate(params: any, route, navigationInstruction) {       
    //route.navModel.router.title="test"; //works here
     return this.api.pull<Product>([params.id]).then(items => {
            items.forEach(item=>
            {
                if(item.id == params.id)
                    route.navModel.router.title = item.name //does NOT work here
            });

     });
}

Setting page title after activation in Aurelia

2 Answers2