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

[@lshadowSFX]

Your content is SUPER USEFUL plus you don't only show the topic of the video itself but you also teach proper ways to do it when comunicating between components!

[@ZoaibKhan]

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

[@lshadowSFX]

@@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!

[@ZoaibKhan]

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 :)

[@lshadowSFX]

@@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!

[@rohitkharche7562]

I was scouting internet for this implementation and then found you uploaded video about it, thanks for this. Would love a similar with material 3 as well.

[@ZoaibKhan]

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 KZbin studio sidebar

[@brianm2029]

Thanks for the great content. Just to contribute and suggest that you can make a nested nav item recursively by calling the nav-item again if there are child items, but add the right inputs to the component to control its behavior and rendering. You can add a level as input and other relevant info as inputs. Thanks

[@yellaiahg9366]

Thanks for the information. Please provide multiple sub menus handling. Example: If we select one menu, showing all submenus.

[@ZoaibKhan]

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

[@studenckimediator9513]

Thank you so much! You helped me a lot!

[@ZoaibKhan]

Welcome, glad it helped :)

[@macgideons4201]

Super Excellent.. if you click on content it shows content , but when you click on video, you still see content page and video page together. is there a way to route to video or playlist without content page also been displayed? Thanks

[@ZoaibKhan]

yes, in that case just create a parallel route for each subpage, instead of making it a nested route of the content. Content is always shown because it is a parent of the video and other child routes.

[@tgrannan]

I've been scratching my head on sub-menus for a few days, this really helped! What do you think it would take to make the parent just open to the children and not have it's own page? The example would be when you click on 'Content' instead of going to the content page it would just open the children. When you click on a child it would behave like it does now. Would love to get your thoughts on this.

[@ZoaibKhan]

It shouldn't be that hard and others have requested this as well, so I might do it in a video for everyone. Basic thing will be to have a null or empty route in content in menu items array. Then if it's empty, we can simply disable the router link on that item in some way.

[@sley007]

Excellent!

[@ZoaibKhan]

Glad you liked it!

[@informer9261]

sir please make an video of how to share data between in different siblings components and how to setup up architechture of an project when we start build apllication.

[@ZoaibKhan]

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

[@swatisharma4241]

I didn’t use stand-alone so it is possible to imports all modules u define in ts file I import them in angular module ts

[@MahmoudTarek-pz1rl]

Thanks a lot for the great content and effort. I just wonder why, for the nested menu item, you didn't use MatExpansionPanel component ?

[@ZoaibKhan]

It's not meant for that purpose and also would've taken lot more time to customize the styling to match the sidebar style. Also, it'd have made it more difficult to make it recursive - as I did in the next video in this series.

[@MahmoudTarek-pz1rl]

@ZoaibKhan I've done something similar using ngTemplateOutlet for recursion and the expansion panel for nested items. The problem was that I had to override many styles, especially for the expansion. And have a problem controlling which panel to open if a nested link is active Your approach is much simpler, and animation is totally customizable. Most of the time, sidebar components have to be more customizable and fit every need possible. Thanks a lot for your great work

[@ZoaibKhan]

@@MahmoudTarek-pz1rl thanks Mahmoud! My sidebar is still quite simple. Have you seen the new shadcn sidebar component? That is truly remarkable

[@MahmoudTarek-pz1rl]

@ZoaibKhan You're welcome, Simple but have a good potential and fulfil many requirements, Yes, I've seen it on the day of releas, and it is on another level The approach he follows is really great. I hope we can have a similar package for angular. Maybe one day Spartan UI will do it as they say

[@GerardoRojasPacheco]

Excellent, thank you very much for your contribution, very clear and useful Please, how could I make the menu expand when I hover over it, something like adminlte

[@GerardoRojasPacheco]

I found the solution and share it..:

[@ZoaibKhan]

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...

[@DirtySouth33T]

great videos, i guess i am using a differnet version of material and things have changed a bit, what version should i be using for this video and the original ones?

[@ZoaibKhan]

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

[@jerrylee9351]

Great video, many thanks for it, but i've a question: Is it possible, that the/one menu-item inform the custom-sidenav, which link is currently active? Background: I would like to put a red bar information on the left side too if the menu is collapsed but one sub item menu entry is active.

[@ZoaibKhan]

You're welcome :) You can check the exact paths option in router link active. angular.dev/api/router/IsActiveMatchOptions#paths

[@jerrylee9351]

@@ZoaibKhan Many thanks for your answer. That seems to work if the top entry ('Content' in your example) has a route entry. In my case the top entry hasn't a route, it works only like a combobox (i hope you know what i mean). 🤔 My idea was to use the rla.isActive flag (that works correct if i test it with '{{rls.isActive | json}}`) to set an output on which listen the custom-sidenav... 🤷‍♂

[@ZoaibKhan]

@@jerrylee9351 how about using an empty route on the top entry?

[@jerrylee9351]

@@ZoaibKhan I already tried this, but it doesn't work too. The first/top entry is *always* selected. Related to your example in the video: I click on 'Videos' and then menu points 'Conent' and 'Videos' are selected. ✅ I switch to 'Analytics'. This menu item is selected ✅, but the 'Content' item is still selected. ❌

[@ZoaibKhan]

It seems I'll have to add explicit support for non route menu items.

[@BatmunkhD]

Very useful, thanks. How to auto toggle/expand less/.

[@ZoaibKhan]

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

[@BatmunkhD]

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

[@ZoaibKhan]

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.

[@AidosOmurzakov]

Great job. content is super usefull can you show example when sidebar is collapsed and show subitems not as icons but show as a menu when hovering the main root icon show on the right menu with child icons routes

[@ZoaibKhan]

You mean like a popup nested menu?

[@AidosOmurzakov]

@@ZoaibKhan yes

[@ZoaibKhan]

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.

[@imohanreddy]

Hi , you are using function call menuItems() for iterating , which is a function is it optimal? as angular will have verify and update everytime irrespective of menuItems array changing?

[@ZoaibKhan]

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!

[@imohanreddy]

@@ZoaibKhan oh , Thanks for the clarification 🙌

[@andresilveira8004]

How can I click the menuItem opening the subMenu but not changing the route? I want to change the route only if I click in the submenu itens. Is it possible?

[@ZoaibKhan]

You can keep the route as empty for that specific item and see what happens? That's a good idea for a feature though which I may add in near future

[@andresilveira8004]

@@ZoaibKhan I already tried it. The route turns to "undifined" like "localhost:3000/undefined/subMenuItem". Waiting for a future video about it :)

[@youraccountissuspended]

good video. can you make video how to use angular signal correctly pls. thx

[@ZoaibKhan]

Hey thanks 🙏 What about signals do you find confusing?

[@youraccountissuspended]

@@ZoaibKhan how to use signal with rest api crud and state management

[@nilpeshpatel1373]

I think with simple tweak it can be for n level subitems

[@ZoaibKhan]

Yup, check out the followup video on recursive components!

[@dcoding]

please next vidio

[@ZoaibKhan]

It's in this playlist kzbin.info/aero/PLHbz-DWIAPJC9QksAO1PHobAGXde3CgIz&si=7hyhPKUKbUUKf79h

[@codeaz5673]

done ✅

[@wams4103]

Good evening Zoaib Khan ! Thank you for the usefull tutorials and clear explanation. So I worked on the four tutorial but not in a standalone. I separated component. Now then I face one error in nested tutorial. here the message I have : NG2: Type 'import("D:/AngularDataProjects/Dashboard1/src/app/components/custom-sidenav/custom-sidenav.component").MenuItem' is not assignable to type 'import("D:/AngularDataProjects/Dashboard1/src/app/components/menu-item/menu-item.component").MenuItem'. Types of property 'route' are incompatible. Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'. src/app/components/custom-sidenav/custom-sidenav.component.html:15:20

[@ZoaibKhan]

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

[@wams4103]

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