Angular 14 Router - Updating the Page Title (2022)

Angular 14 simplifies how we can update the title of our pages. Every Angular Route has a dedicated property called "title" where you can define a title or the resolver that can perform some logic for more complex cases. Also, you can specify a global strategy that extends the default title strategy and implements your own way of how the title should be updated. All these things will be covered in this video. Enjoy watching!

✂️ Use coupon YOUTUBE_DISCOUNT to get a 10%-off discount ✂️

Source code on GitHub:

Source code for Named Routes:

🕒 Time Codes:
00:00:00 - Intro;
00:00:45 - Describe the Problem;
00:01:37 - Basic Titile Implementation;
00:02:26 - Advanced: Using the Title Resolver;
00:09:17 - Advanced: Using the Custome Title Strategy;
00:13:53 - Use-case with Named Routes;
00:20:18 - Outro;

↙️ Short Frontend Snacks every week here:

#angular #angular14 #angularrouter #webdevelopment #ng

[DecodedFrontend]

Thank you for wantching! Please leave your comments and thumbs up. Every your activity helps this channel to grow :)

[Suncircle]

Modern technologies provide us with best experience, that is why you need to watch 20 minutes video to automatically set up page title. Very good.

[aaronkoller]

Your strength is your ability to take your time and explain each step. It gives us so much insight into your thought process. In addition your examples are well thought through and prepared. Thank you!!

[kenanareda]

Thanks for the great simplified explanation!

[pwrDolphin]

Like first, then watch.
Thanks for your constant contribution, Dmytro!

[demidovmaxim]

Thank you for every video that comes out on this channel!)

[alexblack]

Do we fetch the user data two times? The first time it is in this routerService and the second in the component. Is it good? Also, how can we create the title "User # 1" for route /user/1 ?

[ievgensvichkar]

Great work, as usually! Short and helpful

[kardashevr]

if you use TitleResolver and also need a page resolver, then you are forced to call the same api twice. How to optimize that case?

[eneajahollari]

Your videos should be included in the documentation 👌

[vinaykumar-benm]

Very nice explanation luv u from india… thanks sir

[RobertoDuransh]

great videos. how well explained thank you

[gururajmoger]

Pls do some project playlists with angular best practices 👍🔥

[dmitriy_tretyakov]

Большое спасибо за твои видео. Они дают на множество вопросов ) Я прочитал комментарии про два запроса к API и видел твой ответ про использование NgRx или snapshot. Не кажется ли тебе, что это какой-то антипаттерн? Вот есть у меня проект, в нем нет NgRx, получается единственным способом остается создать Resolver, который будет называться UserTitleResolver (что наводит на мысль, что сервис отвечает только за генерацию тайтла), но по факту внутри еще будут сохраняться данные о пользователе. Получается, что работоспособность приложения будет зависеть от этого Resolver'a и если его удалить из приложения, то всё сломается. Как правильно организовать код без NgRx? Не понимаю )

Если создать UserResolver, то тогда у него будет тип возвращаемого значения String и это тоже странно.

[jozef.chovan]

pluck is deprecated: Use map and optional chaining: pluck('foo', 'bar') is map(x => x?.foo?.bar). Will be removed in v8.

[VenelinManchev]

Instead of creating a new service manually implementing the Resolve interface, you can use

ng generate resolver TitleResolver

or short-hand version

ng g r TitleResolver

[dimitritsikaridze]

Great video as always, I have a question at 6:38 when would you use route.paramMap instead of route.snapshot.params?

[mktrann]

Hi, I have a question related to setup title for named router outlet. It is working fine if I provide a string as title, however, in case using title resolve service, it returns the class implementation rather than the returned value from 'resolve' function. My concerning is that could we use resolve service for named router outlet as well? Thank you!

[maxcl]

Is there a way to combine the two options? I want to be able to generate a dynamic title and also using the title string defined in the routing.
Like:
APP - UserName(comes from the resolver) - Details(comes from the title)

[tarktaro]

How can I use await inside resolve method?