How to create a Nested Sidebar in Angular 18 with Material Components! 

Thanks man! Glad you're finding it useful :) Everything we create goes through a process so it's important to understand the process as well, so that we can learn lessons for the future! Thanks for your input

@@ZoaibKhan I trully love your content! It is super easy to follow, it does feel like you always know what you are doing and not just "guessing" like a lot of people! your channel is super instructive! new subscriber here! Could please make a tutorial on how to properly migrate to angular 18 from older versions of angular? like angular 16 to angular 18, for example. I've tried doing it and there are always so many errors, problems with installed libraries because of versions support, etc., plus, the older versions of angular managed all components as a non-standalone, so everything went into a app.module.ts huge file with all services, components, custom pipes, etc. With no configuration for hydration and what not, so how is it done? :( I'd really appreaciate it! and i'm sure a lot of people will too! thank you so much for all your work!

Well, a little secret: I had to record this video multiple times, because the first time I made a lot of mistakes which would've caused a lot of confusion. But that's just the process all of us creators have to go through :) Thanks for the subscribe and I hope you find more value here. About your suggestions, that is another frequently asked topic. And the only reason I haven't yet created a video on upgrade guide to latest version is because of its complexity. I recently upgraded one of my client's apps to the newest version - and from upgrading material to standalone to routing/state and third party libraries - it can get messy pretty quickly. But I've it in my list of todos - and hopefully will get to create one soon. I have an older chat app in Angular - maybe that would be a good cast study to follow for an upgrade to the latest version :)

@@ZoaibKhan I can tell you put a lot of effort into the videos! It makes it really pleasant to watch and listen to! thank you very much!

Can you elaborate that a bit? You mean expand all nested menus at once?

You're welcome 🤗 About material 3, it's going to change the look and feel of the sidebar a bit, so I'm not sure. Currently it is mimicking the RU-vid studio sidebar

Ok, those are common issues, so I've noted them for future videos.

Yup, check out the followup video on recursive components!

Glad you found it useful! You mean you want to toggle the nested state programmatically from outside the component?

@@ZoaibKhanyes, automatically expand less when moving to other title.

Means on navigation? Hmm, that's interesting. We can handle that by listening to a Navigation event inside the sidenav, then simply making the nested signal false when that happens.

You mean like a popup nested menu?

@@ZoaibKhan yes

Hmm, hiding the subitems in collapsed state is easy, but creating a separate popup for those items can be a bit challenging. If I had to do it, I'd use the angular cdk overlay package to create a custom overlay and open and close on hover/hover out.

I found the solution and share it..:

Perfect! One improvement might be to delay the mouse out a bit and wait for the user to be truly out of the sidenav and then collapse it. To prevent mistakes...

It's using angular material 2 - which is default UpTo angular v17. From v18 onwards, it's material 3

It is a signal, Mohan! Signal values are accessed just like you're calling a function. As we move forward with the new changes in Angular and Zoneless apps, using signals in templates is the recommended approach!

@@ZoaibKhan oh , Thanks for the clarification 🙌

It's in this playlist ru-vid.com/group/PLHbz-DWIAPJC9QksAO1PHobAGXde3CgIz&si=7hyhPKUKbUUKf79h

Good evening to you too :) Your error seems to point to a problem with the route. If possible, could you show the routes code?

@@ZoaibKhan Good evening Dear Zoaib ! Thank you for your response. the issue was resolved. I really appreciated.