Setting page title after activation in Aurelia - config

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
});
});
}

Answer 1

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.

Answer 2

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
});
});
}