{"id":749,"date":"2023-04-05T05:00:00","date_gmt":"2023-04-05T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=749"},"modified":"2023-04-04T18:28:14","modified_gmt":"2023-04-05T01:28:14","slug":"using-a-resolver-function-or-a-title-strategy-to-change-the-page-title","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/using-a-resolver-function-or-a-title-strategy-to-change-the-page-title\/","title":{"rendered":"Using a resolver function or a title strategy to change the page title"},"content":{"rendered":"\n

Before we get into today’s topic:<\/strong> The Angular Team’s Request for Comments (RFC) for Angular Signals<\/a> is now open to the public. Feel free to take a look and give your feedback.<\/em><\/p>\n\n\n\n

Yesterday, we saw how to change an application’s title using the router config<\/a>. Today, let’s cover more complex scenarios when we need a dynamic title set depending on other factors.<\/p>\n\n\n\n

Using a resolver function<\/h2>\n\n\n\n

First, we might need some processing using a function to extract information from a service or API. In that case, we can use a resolver function that gets that data and returns it:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Note that the signature of that function<\/a> allows us to return a string<\/code>, an Observable<\/code>, or a Promise<\/code>. That way, we can make an API request to fetch some extra data if needed. For instance, in the above example, getUsername() returns an Observable (code here). This is another excellent example of using the inject<\/code> function we covered earlier in this newsletter<\/a>.<\/p>\n\n\n\n

Using a title strategy service<\/h2>\n\n\n\n

For more complex scenarios, Angular allows us to create a custom TitleStrategy<\/a><\/code>. Such strategy takes the form of a service that has to implement an updateTitle<\/code> method:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Here is an example where I add a prefix to the title, then use the default title from the title property in the router config. Note that we could easily inject other services and perform async operations before setting the new title if needed:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Such title strategy service has to be provided as the default title strategy in our dependency injection configuration as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can see that example in action here on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Before we get into today’s topic: The Angular Team’s Request for Comments (RFC) for Angular Signals is now open to the public. Feel free to take a look and give your feedback. Yesterday, we saw how to change an application’s title using the router config. Today, let’s cover more complex scenarios when we need a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,25],"tags":[],"class_list":["post-749","post","type-post","status-publish","format-standard","hentry","category-angular","category-routing"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t