Angular 14 Router - Updating the Page Title (2022)

Aug 15, 2023

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!

💥 Angular courses made by Dmytro - https://bit.ly/df-courses 💥
✂️ Use coupon YOUTUBE_DISCOUNT to get a 10%-off discount ✂️

Source code on GitHub:
https://github.com/DMezhenskyi/new-ro…

Source code for Named Routes:
https://github.com/DMezhenskyi/angula…

🕒 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:
Twitter - https://twitter.com/DecodedFrontend
Instagram - https://www.instagram.com/decodedfron…
LinkedIn - https://www.linkedin.com/in/dmezhenskyi

#angular #angular14 #angularrouter #webdevelopment #ng

Content

4.2 -> Hi everyone! welcome, my name is Dmytro Mezhenskyi I am the author of this awesome YouTube channel

10.02 -> where I try to publish Advanced Angular Tutorials so if you have been looking for this kind of

15.3 -> videos please check it out I'm pretty sure you will find something interesting here today I'm

20.7 -> going to show you a brand new angular router feature that allows you to set page title for

27.36 -> every particular road we will have a look at the very basic implementation then I will show you a

33.6 -> bit more advanced use cases and then of course I will show you how to deal with named Route and this

41.58 -> new feature so stay here and let's get started so this is the application I used in my previous

48.6 -> tutorial about providers in angular router and I'm going to reuse it today because this application

55.98 -> has everything we need for today's video it has predefined Routes and it is built with angular 40

64.14 -> team and now let me quickly highlight the problem we are going to solve in this video

69.84 -> so when we navigate through different pages on our application you can see that the title for

78.36 -> our application reminds the same and it is quite bad user experience it is bad for our

85.32 -> CEO so yeah we have to fix it and we could fix it even before angular 14 okay but with

94.98 -> angular 14 it became even easier and let me quickly show you how you can do that

101.64 -> in order to set up the title for every particular Route we have to use a brand new property for the

110.52 -> road called title and such a way we can Define for the home page the string home the same we can

119.64 -> do for rest of the roads like for users it's going to be uh users and for the admin it is going to be

128.94 -> admin like that and now you can see that my title has been updated and for the users page

136.14 -> my title is user and when I go to the home page it is updated with home so it is cool uh however

147.42 -> the hard-coded string not always the solution for instance we have also user page like we have users

158.34 -> the list of the user and when I click more details I go to the user page where I can see user details

166.5 -> and here it would be quite I don't know strange to put a string something like user yeah because

178.86 -> um it makes no sense to me I would like to know which exactly user is currently active so I would

186.84 -> like to put some maybe the name of the user or ID of the user into the title so I would like to

193.38 -> differentiate uh which exactly the user is currently active and if we have a look at the title property

203.64 -> um and namely the type of this property you can see that the value for this title could

210.24 -> be either string or it can be such an interesting generic which basically means that it should be a

217.5 -> class that implements this interface and if you are interested in tips like that some small tips

225.78 -> subscribe to my social media pages on LinkedIn Twitter and Instagram there I post every week

234.42 -> some small hints like this one so it could be interesting for you as well but yeah uh let's

242.58 -> get back to our source code and um so we know that we can provide some class that implements

251.46 -> resolve interface and it will be working so we can make our title a little bit more Dynamic so let's

259.44 -> create a class for that and I'm going to create a new service so I generate the new service uh

268.44 -> user title resolver like that and now we have to implement the resolve interface for that so

277.86 -> here I say implements or resolve interface and remember that this resolve interface is generic

288.9 -> so and there should be strings or something like that now typescript complaints because we have to

297.18 -> implement an appropriate method for that namely resolve method uh and yeah I will close this

306 -> part here and here we have to put some logic that Returns the string which eventually will be the

313.14 -> the value for our title so in order to pull data about some particular user I will be using my user

324.78 -> loader service and this service actually has load user method that knows how to fetch data for some

333.36 -> particular user so I will grab the name of this service and I will inject it in my resolvers so I

342.36 -> inject the user loader and here we have to return as you can see either string or observable of the

350.1 -> string or the promise of the string so here I return the result of load user method it takes

359.64 -> as a parameter the ID of the user and it Returns the observable of the user object so first of all

367.26 -> we have to provide the ID of the user as a value for this method so where I can get this user ID if

379.92 -> you remember we have appropriate parameters right here so we can basically read it from the Route

387.6 -> so I will use my Route here then we have paramMap and from the paramMap I can get the ID parameter

400.86 -> just make sure that this parameter it matches the parameter right here okay so that's easy as that

409.74 -> and as I said uh this load user method Returns the whole user object but I don't need the user

418.44 -> object I just need some particular string from that and namely it is the user name so inside

426.42 -> the pipe I will try to fetch the name using black operator and then I would like to slightly modify

437.34 -> the string I don't want to render just the name of the user I want to have something like user Dash

443.34 -> and then username so I would use the map operator as well and here I get my name and I return the

454.26 -> string or I have user and then Dash and only then I will provide the name of the user the only thing

464.82 -> typescript complaints that all right our load user method uh expects as an argument either string or

475.2 -> number but get method from the paramap mine return also now so we have to either explicitly check if

484.32 -> the parameter is not null and then calls the user or I can do some dirty trick and use exclamation

492.48 -> mark in the end it will tell typescript that don't worry about now we know for sure that there will

499.56 -> be some value you should try to avoid this in production and explicitly check a null undefined

506.7 -> cases but yeah for learning purposes it's a Okay so such a way I created my title resolver and

516.42 -> the only thing we have to do is to apply this resolver for the particular road so inside the

524.94 -> user's rotor instead of string user I will just provide the reference to my user Title resolver

534.78 -> Service as easy as that and now I can save it and if we go to the browser you can see that

542.88 -> my title has been properly updated so now we have uh user Dash and the name of the

550.68 -> user if I open some another user so you can see that everything was updated accordingly

558.06 -> this is very cool however we could have some third scenario for instance we would like to add

567.12 -> some prefix to every Route on our application maybe we would like to have something like the name of

574.98 -> application and then Dash and then the name of the of the particular page and currently we could do

583.14 -> it just by you know adding this prefix manually to every Route but in real application you might have

591.54 -> hundreds of Routes and it is very inconvenient to do it for every single Route so we can create the

599.22 -> the global strategy that uh will do it for us and in order to do that we can actually remove this

607.74 -> prefix for now we can create another service that will be responsible for the custom title strategy

616.68 -> so I generate a new service called custom title strategy and uh it was generated so let's open it

627.96 -> um what we have to do here is that we have to extend the basic title strategy so I will

638.94 -> extend uh title strategy like that and this is abstract class that has abstract method

649.56 -> update Title this is exactly the method that will update our title tag and where the whole

657.6 -> logic will be existing so let's implement it and here we are going to implement our custom logic

668.82 -> and first of all, we would like to get the actual title for the Route yeah so I will create a

678.12 -> constant title and this class title strategy so like parent class, it has a build title method

689.76 -> that actually fetches the title for the currently active Route so I will uh provide just a snapshot

699.54 -> to it and here I will get the title if it provided yeah and then I can do some simple checks like if

709.32 -> the title exists then I will set up the title and in order to set up the title I have to inject an

717.6 -> appropriate service that can work with that and this service called actually uh title

724.68 -> because we extend title strategy we have to call Super in our Constructor like that cool and now

734.1 -> I can set up the custom title for them for my application so I say that use set title method

745.14 -> from the title service and set the following string like app and then the title which is

753.66 -> defined for the road so like that just a small reminder is that inside this title will be the

762.3 -> value you provided for some particular role in the title property all right so we get the value from

770.7 -> the title property and just attach some prefix there but currently angular doesn't know about

778.62 -> our custom title strategy service so we have to provide it globally in our application and the

786.84 -> way we can do it we can go to the app module and here inside the providers we can provide

796.68 -> title strategy and then we provide the alternative implementation that is actually the reference to

804.48 -> the custom title strategy service otherwise there will be picked some default strategy and we are

814.14 -> ready to go so we save it and then if we reload the page and it is already reloaded you can see

822.78 -> that we got this app prefix right here and also if we go to the user details yeah everything kind of

831.9 -> works as expected but I can already predict your question how it will work with named roles if you

840.3 -> don't know what our name trolls I have a special video for that and by the way the use case from

846.84 -> that video I will be using right now in order to show you how it works with the named rolled

854.88 -> so here is the application with named road you can see it right here so named Road it's kind of

863.76 -> forking the road on the same page you can you have kind of two independent rows so I can I have the

871.86 -> users rode that renders the list of the users and I have some details wrote where I render details

882.06 -> for users or for images yeah and they are kind of independent but just if you don't know what is

890.22 -> that just have a look at that video and everything uh will be pretty much clear for you so let's

897.48 -> do let's apply titles for uh this application as well so I will go to vs code switch to the

905.76 -> named router Outlet application I updated it to angular 14 as well so everything will work and

913.56 -> here is our roads so I will add title uh for users then I will say that this is the user details

924.84 -> and remember it could be dynamic one but I just leave it as a regular string and we do pretty much

932.64 -> similar for the photos so here will be photos and this one is photo details and let's have a look

942.48 -> what we have now you can see that we get values only from the primary Road and name wrote are

951.3 -> kind of ignored so the default title strategy doesn't work with named roads and custom title

959.82 -> strategy is exactly the way how you could kind of merge them both together and react on this

968.34 -> use case and I will quickly show you how you can achieve this so I will go to the source code and

977.34 -> here we have to do quite the same thing we have to generate a new service so here I have a custom

985.62 -> strategy as well so I can go there I have to extend title strategy then I have to implement

996.24 -> um the abstract update Title method then I remove this part and I have to inject the title as well

1004.88 -> so let's inject Title Service here we go of course don't forget to call Super all right and here

1018.32 -> um let's have a look first of all what do we have inside a snapshot and for now I will just drop the

1025.34 -> logic from our previous strategy we will redo it a little bit and of course we should not forget

1032.84 -> to provide this new router strategy so here is my title custom strategy and I have to import

1043.52 -> title strategy as well so here we go and let me uh make it bigger a little bit and in fact we have

1053.72 -> all necessary data in order to you know build the custom Uh custom title for it inside the children

1062.96 -> we have references to the role that belongs to details Road and we have also a reference to the

1070.82 -> primary Road as well so what we can do actually is too womb we can get the reference to the road

1080.36 -> that is activated for details Outlet right so we can create a constant called uh details outlet

1088.7 -> and then uh inside the snapshot for root we have children and here I just use the find operator and

1100.1 -> find the first rolled snapshot which has Outlet equal to details like that and then I can do the

1112.1 -> following thing first I will rename cons to let because we will be modify this variable and I will

1119.24 -> do this simple check that if uh the details named wrote is activated uh then we will modify slightly

1130.52 -> their title variable and we will modify to the string like title right and then we could have

1139.94 -> something something like that I don't know I don't care it's up to you their concrete implementation

1145.88 -> and thereafter the arrow we would like to show the title from the name troll so we kind of merge

1155.42 -> them together so there would be details outlet and from the router config we can get the title

1166.4 -> actually right so I I can save it and I think it should work so I will pull it down let's reload it

1177.8 -> yeah and you can see that uh we have photos this is the title of the primary Road and we have the

1187.46 -> photo details that is the title for the named road called details and if I navigate to the

1195.14 -> users you can see it was also properly updated and if I opened user details we can see only

1202.64 -> users if I just have only primary Road activated we see only value from the primary Road and from

1213.86 -> the secondary road we have nothing so we show nothing all right guys that was it I hope this

1220.58 -> video was really useful and if so please share it with your colleagues and friends leave your

1226.1 -> comments and of course subscribe to my other social media Pages because every week I publish

1232.94 -> there some small front-end tips that might be also useful and interesting for you if you would like

1239.6 -> to support my channel and basically everything what I'm doing and additionally get some useful

1245.24 -> knowledge then check out my video courses I will drop the links in the video description

1250.46 -> there you can also find some coupon codes so you can get the course with some discount which

1257.12 -> is cool otherwise I wish you productive week ahead stay safe and see you in the next video

Source: https://www.youtube.com/watch?v=WKCweQOI9-U