Create a YouTube sidebar clone with Angular Material Components! (Part 3 - Animations) 

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

You're welcome 🤗 Glad that you liked it. You might like my other tutorials as well :)

Glad you found it useful! ☺️

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

You're welcome :)

Glad you liked it!

You're welcome! Sure, I plan to cover the new angular material 3 and how it makes customization so easy soon :)

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 RU-vid 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 🙏

Yes I will

You're welcome 🤗

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

Glad to hear that ☺️

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.

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

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

I'll have to check that out. Not used it much

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!

Glad you liked it!

Have you added the outline icons to index.html?

@@ZoaibKhan Yes, of course!

I finally fix it! Thanks a lot 💙💙

@@davoodsoleimani9482 Great! :)

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!

✌

This was the last part of the RU-vid sidebar series. Or do you mean next video on the channel? :)

@@ZoaibKhan oh. I thought you clone RU-vid 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