you have the greatest pedagogy amongst all the front end content creators out there. a word from a back-end dev that was forced to do some front :D thank you
Was searching for any projects that are made on angular 18, but i couldn't find one. This was the only tutorial that had the updated angular version used, Strongly recommended and suggested for people who are struggling to learn about the new angular features. Thanks Sir!!
You're welcome! I'm working on a free modern Angular 18 Crash course to introduce developers to the latest Angular features, so that should be helpful :)
It was amazing, thank you!!! I'm so glad I found your channel :) I started learning Angular in my new job after a few years working with React and it's pretty hard, this tutorial was very helpful :)
Thank you so much Zoaib, this tutorial is the first of yours I've done and I really learned quite a bit. Question, how would you hide the side bar when not logged out?
You can use the opened property of the sidenav and change it based on the logged in state. Or you can also just only keep the sidebar in the logged in routes components, so when user logs out, the sidebar disappears
Superb video ♥, thank you for this tutorial. I learned a lot from these series of 3 videos. please can you finish this series by doing responsive design 🙏
@@ZoaibKhan Thank you for considering my proposal. I would like to express my gratitude and encouragement for your work. Allow me again to submit a new idea. In order to make this video truly exceptional, I humbly suggest that you go beyond the level of RUclips by making dropdowns with the Dashboard links. Hoping that this comment finds you in good conditions...
This video helps me a lot, how can i add multilevel menu to the sidebar? i need to do that for a personal project and i wanna follow this sidebar style
En verdad genial respecto a una visual muy limpia y agradable a la vista. Me gustaría saber si ¿hacerlo de esta forma, tanto el template como css en el archivo de typescript, ayuda a reducir aún más el peso al momento de contruir el SPA?
Thanks man! It's actually just an alternative way to build Angular components - does not have any effect on bundle sizes, if that's what you mean. But it does mean that when a component is getting large, we come to know pretty quickly about it and can subdivide it into further components to keep our code clean and easy to maintain later on. Translated: ¡Gracias hombre! En realidad, es solo una forma alternativa de construir componentes Angular; no tiene ningún efecto en el tamaño de los paquetes, si a eso te refieres. Pero sí significa que cuando un componente crece, lo conocemos con bastante rapidez y podemos subdividirlo en más componentes para mantener nuestro código limpio y fácil de mantener más adelante.
Excellent videos for someone just staring out trying to create a menu with sidebar. Best videos I've seen yet! Question though, I'd like to close the sidenav upon clicking - how can I go about doing this? Sorry, this is probably very easy for most but I'm a beginner :)
@@ZoaibKhan Hi, thanks for responding and sorry for not being very clear. I'm wondering how I can minimize the sidenav after clicking one of the links in the mat-nav-list. So after clicking "Dashboard" or "Content" for example, I'd like to have the sidenave minimized automatically.
@@imagolfpro oh, I see. So you can create an output inside the sidenav which is called when any of the items is clicked. Then use an event handler outside it to change signal which contains the sidenav state. If it's bit unclear, I can give you code snap as well
i really loved this 3 part tutorial. however, my colors (that i picked) in styles.css are not showing up. there is only the default color. but at least i know, that the primary color worked, because i was able to change the little stripe on the side of my chosen route. do you have any idea what the problem could be, or could you send me your code from styles.css? i am a beginner and i tried to copy what you pasted in there, but maybe i forgot something
Make sure it's styles.scss, not styles.css, as adding a custom material theme requires sass to work. You will need to rename the file, change it's reference in angular.json as well. Hope that works!
Another great vid, but height zero !important does not work for me. I had to use font-size: 0px and then it transitions nicely. Not sure what I'm going to do with the images...
@@ZoaibKhan After rewatching your part two video I realised that I'd forgotten you'd already explained how to change image size dynamically: using functions and making the height and width properties reactive. It all works well now. Thanks again Zoaib!
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
you have the greatest pedagogy amongst all the front end content creators out there.
a word from a back-end dev that was forced to do some front :D
thank you
Thanks man! Glad it helped you out :)
P.S. I'm actually reverse. So a front-end dev who can only be forced to do some backend :D
I can not appreciate you enough Khan. There aren't many tutorials on the new Angular 17.Thank you! This is a great frontend tutorial!!!
You're welcome 🤗 Glad that you liked it. You might like my other tutorials as well :)
Was searching for any projects that are made on angular 18, but i couldn't find one. This was the only tutorial that had the updated angular version used, Strongly recommended and suggested for people who are struggling to learn about the new angular features. Thanks Sir!!
You're welcome! I'm working on a free modern Angular 18 Crash course to introduce developers to the latest Angular features, so that should be helpful :)
Well explained video, thanks a lot. Your rock!
Glad you found it useful! ☺️
It was amazing, thank you!!! I'm so glad I found your channel :)
I started learning Angular in my new job after a few years working with React and it's pretty hard, this tutorial was very helpful :)
You're welcome :)
Incredibly clear and easy to undestand. Gz
Glad you liked it!
Thank you so much Zoaib, this tutorial is the first of yours I've done and I really learned quite a bit. Question, how would you hide the side bar when not logged out?
You can use the opened property of the sidenav and change it based on the logged in state.
Or you can also just only keep the sidebar in the logged in routes components, so when user logs out, the sidebar disappears
Superb video ♥, thank you for this tutorial. I learned a lot from these series of 3 videos. please can you finish this series by doing responsive design 🙏
That's a good idea! I'll add it to my list :)
And thanks for comment! It's great to see you guys deriving benefit from these tutorials 💖
@@ZoaibKhan Thank you for considering my proposal. I would like to express my gratitude and encouragement for your work. Allow me again to submit a new idea. In order to make this video truly exceptional, I humbly suggest that you go beyond the level of RUclips by making dropdowns with the Dashboard links. Hoping that this comment finds you in good conditions...
@@delfredtene6269 aah, you mean nested menu? another good idea, thanks!
@@ZoaibKhan Yes, that's what I'm talking about. Thank you for validating my ideas 🙏
I'm immensely thankful for the explanation 💚. I'm curious if it's feasible to add an option for this sidebar to be positioned at the bottom instead.
It's possible, though would be bit weird, I guess. Is there any special reason to keep it like that?
@@ZoaibKhan Thanks for replay🌹, and yes I want it to be only for mobile devices so that menu will be closed to user fingers
How about you keep a bottom navigation bar - that is the usual way for mobile right? Instead of a sidebar
Many thanks for the great tutorial. Could you please provide one more tutorial with nested menu in the sidenav?
Yes I will
Thank you so much i appreciate that the way you teach .❤️ ❤
Please make series on angular material also🙏
You're welcome! Sure, I plan to cover the new angular material 3 and how it makes customization so easy soon :)
Thank you for the video.
I need a help. Can't implement login page outside ofthis router outlet
:/
Check the other reply I've given on my recent video. Maybe I should create a video followup for this :)
@@ZoaibKhan Thank you very much for your feedback and for being so patient. In fact, a video would really help a lot.
Thank you. But why material outline icons did not work for me?!🤔
Have you added the outline icons to index.html?
@@ZoaibKhan Yes, of course!
I finally fix it! Thanks a lot 💙💙
@@davoodsoleimani9482 Great! :)
This video helps me a lot, how can i add multilevel menu to the sidebar? i need to do that for a personal project and i wanna follow this sidebar style
You can add submenu items in the items array and then use it to create nested menu for each item. I'll try to show in a video hopefully
@@ZoaibKhan Thanks!, i would like to see that in a video, meanwhile i will try that
Great content, thanks for sharing.
You're welcome 🤗
En verdad genial respecto a una visual muy limpia y agradable a la vista. Me gustaría saber si ¿hacerlo de esta forma, tanto el template como css en el archivo de typescript, ayuda a reducir aún más el peso al momento de contruir el SPA?
Thanks man! It's actually just an alternative way to build Angular components - does not have any effect on bundle sizes, if that's what you mean. But it does mean that when a component is getting large, we come to know pretty quickly about it and can subdivide it into further components to keep our code clean and easy to maintain later on.
Translated:
¡Gracias hombre! En realidad, es solo una forma alternativa de construir componentes Angular; no tiene ningún efecto en el tamaño de los paquetes, si a eso te refieres. Pero sí significa que cuando un componente crece, lo conocemos con bastante rapidez y podemos subdividirlo en más componentes para mantener nuestro código limpio y fácil de mantener más adelante.
thanks , it help me a lot
Glad to hear that ☺️
thank u sir
Excellent videos for someone just staring out trying to create a menu with sidebar. Best videos I've seen yet! Question though, I'd like to close the sidenav upon clicking - how can I go about doing this? Sorry, this is probably very easy for most but I'm a beginner :)
By close you mean minimize? Because in the sidebar that we build here, it's always visible to the user.
@@ZoaibKhan Hi, thanks for responding and sorry for not being very clear. I'm wondering how I can minimize the sidenav after clicking one of the links in the mat-nav-list. So after clicking "Dashboard" or "Content" for example, I'd like to have the sidenave minimized automatically.
@@imagolfpro oh, I see. So you can create an output inside the sidenav which is called when any of the items is clicked.
Then use an event handler outside it to change signal which contains the sidenav state.
If it's bit unclear, I can give you code snap as well
@@ZoaibKhanThanks, that worked!
When is the next video coming ?
This was the last part of the RUclips sidebar series. Or do you mean next video on the channel? :)
@@ZoaibKhan oh. I thought you clone RUclips series
@@tanvuminh9547 Oh, that's a nice idea though. But a very big undertaking!
@@ZoaibKhan Of Course. If you don't have an idea, you can do it 😁😁😁. it will share a lot of knowledge about angular
i really loved this 3 part tutorial. however, my colors (that i picked) in styles.css are not showing up. there is only the default color. but at least i know, that the primary color worked, because i was able to change the little stripe on the side of my chosen route. do you have any idea what the problem could be, or could you send me your code from styles.css? i am a beginner and i tried to copy what you pasted in there, but maybe i forgot something
Make sure it's styles.scss, not styles.css, as adding a custom material theme requires sass to work.
You will need to rename the file, change it's reference in angular.json as well. Hope that works!
Another great vid, but height zero !important does not work for me. I had to use font-size: 0px and then it transitions nicely. Not sure what I'm going to do with the images...
Thanks! That's odd, not sure what's happening there. What are the images you're talking about?
@@ZoaibKhan After rewatching your part two video I realised that I'd forgotten you'd already explained how to change image size dynamically: using functions and making the height and width properties reactive. It all works well now. Thanks again Zoaib!
@@jamesquinlan2638 No problem! Glad you were able to figure it all out :)
Very nice front end tutorials. Can you do one on reusable layouts. Like Google cloud admin console layout
I'll have to check that out. Not used it much
Cool !! Thanks a lot !!!
Glad you liked it!
nice man
✌