Create a YouTube sidebar clone with Angular Material Components! (Part 1)

#Angular #Sidebar #Collapse
Get the final code from my shop!
www.buymeacoffee.com/zoaibkha...
📽️ Full stack Angular + Firebase course (50% off):
www.udemy.com/course/angular-...
✍️Blog version of the complete tutorial:
zoaibkhan.com/blog/youtube-st...
In this series of videos, I'll be showing you how to create a KZbin sidebar clone using Angular Material Components!
Follow for more Angular tutorials, tips and tricks:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :)

[@TheZukkino]

Incredibly clear and straightforward as always.

[@ZoaibKhan]

Thanks 🙏 Glad you found it clear to follow!

[@BlackbirdStudiosBXL]

Thank you so much for this. Exactly what i need.

[@ZoaibKhan]

Glad it was helpful! :)

[@jamesquinlan2638]

Great stuff boss!

[@ZoaibKhan]

Glad you liked it!

[@BlackbirdStudiosBXL]

Brilliant. I had no idea how to implement this will try today to get this woeking in our project. Thank you so much!!!

[@ZoaibKhan]

Also check out my recent followup to this - where I add the nested menu items functionality as well kzbin.info/www/bejne/q2mWpXx5fst_jcU

[@BlackbirdStudiosBXL]

What other tricks do you have up your sleeve im hooked. ​@@ZoaibKhan

[@BlackbirdStudiosBXL]

Will this work in Angular 17 and 18 probably right? You are using standalone components

[@ZoaibKhan]

@@BlackbirdStudiosBXL yes, the nested one esp was made in v18

[@mohamedbirali803]

Keep going, lots of projects need a side bar 👍, we appreciate your time*

[@ZoaibKhan]

Thanks man! 🙏

[@TheAlejandro1094]

Awesome! Thanks so much !

[@ZoaibKhan]

Welcome 🙂

[@user-fy8pl4sf4h]

Thank you, teacher, for these projects. Please publish more for beginners

[@ZoaibKhan]

You're welcome! Which projects will you be interested in? :)

[@user-fy8pl4sf4h]

@@ZoaibKhan In any project

[@user-fy8pl4sf4h]

@@ZoaibKhan project of admin dashboard & login form with validators & project to advanced

[@Labiqakhan]

Thankyou.

[@axitpoojara]

great explanation thanks a lot

[@ZoaibKhan]

You're welcome! Do like and subscribe so the video reaches more people 🙂

[@poojaagrawal4514]

shandar

[@hoangtoan9836]

Hope Part 2 soon !!!!

[@ZoaibKhan]

Here you go: kzbin.info/www/bejne/iaKYpZeBgKetbbM

[@juniorngomajose9454]

Thank You

[@ZoaibKhan]

You're welcome 🤗

[@mahdiandalib186]

nice man, i hope you implement youtube comment section(recursive) and also youtube scrollable slider tabs where there are two arrows on the left and right section and the suggestion tabs are in between and you could slide ....

[@ZoaibKhan]

Thanks man! Very helpful suggestions. Have noted them

[@mahdiandalib186]

thx, waiting for you to teach us@@ZoaibKhan 😍

[@ianvink]

I bought the BuyMeCoffee full project and it works great. How do I add a 3rd level to the menu, 2 isn't enough

[@ZoaibKhan]

Glad you liked it! The way to add the third level is the same as the second level, but added nesting. Or we could use recursion for it to enable even more levels. Let me look at the code a bit and get back to you :)

[@ianvink]

@@ZoaibKhan I’m happy to buy the next version too

[@ZoaibKhan]

No need for that. I'll send out the updated one for all those who have already bought it - when I get to update it :)

[@ZoaibKhan]

And here you go - support for multiple infinite levels added! Also, hope you don't min me mentioning you a bit in the video kzbin.info/www/bejne/f6PJZZSQeJh_hrs P.S If you've not received the updated version, let me know. I'll send you a free coupon for it :)

[@ysacpebes1462]

hermoso!!!! part 2 👏🙏😊

[@ZoaibKhan]

Thank you :) Part 2 is coming soon! Please subscribe so you can get notified

[@franciscofdez8334]

It would be incredible if you do a search bar google-like using angular material components❤

[@ZoaibKhan]

You mean the Google search input field?

[@franciscofdez8334]

@@ZoaibKhanyes, exactly including matAutocomplete attached to that input

[@ersispahia]

do you have a tutorial for the whole youtube clone?

[@ZoaibKhan]

No, not yet anyway :) but good idea 💡

[@hagarmosleh5910]

What if i want to make the user change the picture?

[@ZoaibKhan]

You can change the pic src to a URL you get from your backend for the user. That depends on your backend server or platform such as firebase. Then, you can allow clicking the pic and take user to a profile page which has an upload button

[@user-ld1pe4or8m]

I don't konw if you missed something, when I click the menu button the sidenave dose NOT collapsed

[@ZoaibKhan]

Check the second part!

[@user-ld1pe4or8m]

thanks I checked with part2, and it works. good job @@ZoaibKhan 👍

[@ZoaibKhan]

@@user-ld1pe4or8m Glad you found it useful :)