How to create a Nested Sidebar in Angular 18 with Material Components!
Вставка
- Опубліковано 9 лип 2024
- #angular #sidebar #nested
✨ Get the code of the nested sidebar here: buymeacoffee.com/zoaibkhan/e/...
📽️ Complete playlist for the Angular youtube sidebar
• UA-cam style Sidebar ...
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
In this video, I fulfill a long standing request by some viewers by adding nested feature to my UA-cam Style Sidebar - so that we can add sub menu items for any of the main items with nice expand and contract animation.
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Sections
00:00 Introduction and Previous Success
00:23 Viewer Requests for Nested Sidebar
00:41 Overview of the Nested Sidebar Functionality
01:45 Starting the Implementation
03:01 Refactoring the Template
03:25 Creating the Menu Item Component
08:53 Adding Nested Menu Functionality
18:18 Implementing Angular Animations
22:34 Conclusion and Next Steps - Наука та технологія
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!
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!
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.
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 UA-cam studio sidebar
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.
Ok, those are common issues, so I've noted them for future videos.
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
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...
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?
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 🙌
This is very useful, thank you. Does your code work with Material 3, or does your code still use Material 2?
Material 2, because I didn't change anything when upgrading from v16 to v18. Would be interesting to try it out though - the menu items might display bit differently in material 3
@@ZoaibKhan Thank you for your reply. Like many others I'm trying to upgrade to M3 and found it very challenging, as there is no clear, beginner-friendly documentation available. Your content has been immensely helpful, and an M3 version of your excellent rail/sidenav would be even more helpful. Thanks again.
Ok, let me try it out by upgrading to M3. Could be an interesting topic for a video :)
Meanwhile, I hope you've gone through the official docs on migrating to M3:
material.angular.io/guide/material-2-theming#how-to-migrate-an-app-from-material-2-to-material-3
@@ZoaibKhan That would be great. Yes I have gone through the documentation, like I said I found it very challenging, and I'm slightly put out by guidance starting off with "ultimately it is up to you".
@@H2-oe4cu haha, yeah it is confusing! Thanks for your input