Building a Recursive Angular Sidebar Component

[@DirtySouth33T]

that is awesome actualy, so this just made me change my mind on some things with my multi layout app. this just made it way cleaner i used the original videos for your sidebar with 1 level :) thanks man!

[@codeaz5673]

I love how you make useful videos instead of boring and useless contents. Keep going Sir. Thank you for everything! Done ✅

[@ZoaibKhan]

Thanks for your kind words! 🙏

[@rafaelTomelin]

This video is great. You do have excellent videos about Angular, congratulations!!!❣

[@ZoaibKhan]

Thanks so much! Glad you liked it.

[@dcoding]

Excellent

[@PrajinSP]

Thank you so much for this amazing tutorial on Angular! Your explanations were clear and really helped me understand the concepts better. I appreciate the effort you put into creating this content. Keep up the great work!

[@ZoaibKhan]

Glad you liked it Prajin!

[@brianm2029]

I’ve just seen another video of yours about recursive components. Will watch that too

[@DirtySouth33T]

i just signed up and bought it for helping support you as well! really love this type of stuff keep on keeping on, inspiring me to do better

[@ZoaibKhan]

Hey Allen! Thanks for all the support. It really means a lot :) And do let me know if you have any suggestions for future content/videos

[@DirtySouth33T]

​@@ZoaibKhan its Adam :) I would love to know your thoughts on a couple of things. How would you approach a multi layout project, where admin and user both have your sidenav with their own dashboard example /admin/dashboard & /app/dashboard but then you have a public layout that has a nav bar across the header like bootstrap almost with login/reset password etc.... Would you make a base layout and extend that in the admin/user layouts and override the menu at the component level? I also would love to you how your thoughts on proper project layout for example you use pages/dashboard then you have components like components/sidenav, when you have a project that gets very large do you see benefits from this type layout I have a project that each page is basically a components and then it has a module that barrels the sub components. I have a core module that wraps and barrels interceptors and things like that and the i have shared/services/models and things of that nature. Thanks Zoaib!

[@ZoaibKhan]

Oh, sorry for that, Adam :) For a multi layout project, there are multiple ways to do this. One is what you suggested, keep a sidenav and the header in the base layout. Then we use some flag in our state in a service (or signal store, whatever) and show and hide them according to the flag. The other option is to just add the sidenav where needed - so you don't need it in the public facing one - so you can keep a parent component for the authenticated routes only (with an auth guard obviously). Maybe naming it as AuthenticatedLayout And keep the other one as the PublicLayout - with the boostrap like header as parent there. I like the second one, personally. Just seems a bit more organized and will allow you to protect the admin and user routes as well using auth guards. For the project structure, I'd kept pages to contain the top level components linked to routes. And the components basically contain reusable parts of those pages - so things like e.g. common buttons, form control elements, things which are shared. About keeping sub components in a separate module (assuming they're NgModules), the only downside is lack of tree shaking - and which is also the problem with the infamous shared modules that've been very common in the Angular world. Devs just end up adding any common stuff there and it keeps getting imported everywhere - unnecessarily bloating up pages when we don't need them. We can keep barrel files though - and also arrays of shared components to use in components when we need a bunch of them. Being mindful that a lot of unrelated stuff is not stuffed into one place. So yeah, that's a short overview. Hope that helps :)

[@DirtySouth33T]

​@@ZoaibKhan awesome answers Thank you so much!! I hear ya on the shared component getting put everywhere LOL!!! i might have done that but now that we have standalone its forcing me to rethink this which is a good thing :) Thanks again brother I look forward to your next video! :)

[@ZoaibKhan]

You're welcome :)

[@GunjanShrimali]

Great content 🎉

[@ZoaibKhan]

Glad you liked it 😊

[@satheeshkumark9571]

It's a great playlist. How to make it as responsive page?

[@ZoaibKhan]

Not exactly this, but the general approach is given in this video kzbin.info/www/bejne/f2KWpnSlhKyIlZYsi=Wav9yFdCfFVPeU-0

[@satheeshkumark9571]

@@ZoaibKhan Thanks Zoaib

[@ianvink]

If you haven't already, a video on using the host {} in the Component header and the various elements you can set in it would be a good video. Reducing the # of DIVs is a great benefit for example

[@ZoaibKhan]

Aah, you mean the host binding in components?

[@NFM-nb7dl]

pls make that rtl

[@SanaTamboli2]

Hi, It’s a very awesome video, I have one question, I don’t have nested routing in my sidebar, so then how could I get the levels of the routes to set the indentation?

[@ZoaibKhan]

Thanks Sana! You mean you have nested sidebar items, but don't have nested routes?

[@SanaTamboli2]

Yes

[@ZoaibKhan]

@@SanaTamboli2 In that case, you can keep a level input in the recursive component - and increment it in the nested menu item component - that way you should automatically get the level of the menu item and use it for indentation

[@LarsRyeJeppesen]

The way your routing works, I believe it imperatively loads all components? There is no lazy loaded route at all? Is that so? One think I would change is that instead of storing the component , you'd store the path to the page, then you have a function in your sidebar component that routes to that page.

[@ZoaibKhan]

Yes, in the recursive version its not lazy loaded on the routes. And that's a good way to go about it. Have you tried it? I'm curious if we can also just derive the path from the route (assuming they're the same).

[@rafaelTomelin]

you do make a video about the menu from the Firebase datastore!!!

[@ZoaibKhan]

you mean a menu generated from the firestore or something else?

[@rafaelTomelin]

@@ZoaibKhan yes, this, with the menu information recorded in a DB (firebase).

[@LarsRyeJeppesen]

Great stuff. Have you thought about mobile use? Right now it doesn't really work well on Mobile - I guess you could change the sidebar to be "over" in mobile mode.

[@ZoaibKhan]

Yeah exactly, that'd be the way to do it!

[@harshakuppala]

Great, Waiting for the updated code

[@ZoaibKhan]

Hey Harsha! If you'd purchased the sidebar in the past, you should've got an email by now

[@harshakuppala]

@@ZoaibKhangot the mail ❤

[@ZoaibKhan]

Awesome! Enjoy 😊

[@ianvink]

well done!

[@ZoaibKhan]

Thanks Ian, in part to you as well :)

[@AkhilManikandan-i1e]

hai zoaib, you are doing a brilliant work in helping people like me, can you make a continuation of this same project with an addition of a dark mode toggler in the toolbar this time, in which when clicked the sun icon changes into a moon icon and vice versa?????

[@ZoaibKhan]

Hey Akhil, thanks 🙏 This is quite a simple change, not sure if it'll be worth a whole video. I already have a dark mode video with material - you can check that out for reference for now. I may add the dark mode and toggle to a starter template containing these components...let's see :)

[@LarsRyeJeppesen]

Can you not safely delete CommonModule that is imported in all the components?

[@ZoaibKhan]

Aah, nice catch! I guess you can - it seems to be a remnant of earlier version of the app.

[@fayazvar3948]

I have not bought the source code, but i passed your videos many time and completed the Navigation Menu. Only one thing i could not do that, how to apply the color theme.

[@ZoaibKhan]

I think that's covered in the 3rd video in the playlist - link to which you can find in the description.

[@Animesh878]

I am i years of exp in angular developer , i did't find any angular vacancy what should i do

[@ZoaibKhan]

I'd suggest building up your portfolio of projects and taking freelance projects while you search for a vacancy

[@Animesh878]

@@ZoaibKhan okk

[@nejmaljamal1281]

Can't we just use angular mat tree component instead

[@ZoaibKhan]

Sure, you can try to. But it's not meant to be a navigation bar and will require lots of modification in styling e.g.