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 :)
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 CZcams studio sidebar
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
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.
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.
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.
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?
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
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!
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
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 CZcams studio sidebar
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
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.
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.
Very useful, thanks. How to auto toggle/expand less/.
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.
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?
It's using angular material 2 - which is default UpTo angular v17. From v18 onwards, it's material 3
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...
please next vidio
It's in this playlist
czcams.com/play/PLHbz-DWIAPJC9QksAO1PHobAGXde3CgIz.html&si=7hyhPKUKbUUKf79h
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 🙌
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
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.