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

[@TheZukkino]

Incredibly clear and straightforward as always.

[@ZoaibKhan]

Thanks 🙏 Glad you found it clear to follow!

[@ersispahia]

do you have a tutorial for the whole youtube clone?

[@ZoaibKhan]

No, not yet anyway :) but good idea 💡

[@alnes204]

you can use the "new" for loop flow: @for (item of menuItems(); track item.route) { {{item.icon}} {{item.label}} }

[@ZoaibKhan]

Yup, I love that. The updated code is using the same

[@o.abdelaaziz]

thanks for providing this amazing tutorial , but you don't provide the init styles.scss code ? can you share it for free . because when I create the angular project and following this tutorial I have different look (everything is white)

[@ZoaibKhan]

Which angular version are you creating the project in? If it's v18, the default style of the mat list item and button have changed. I've done another video on Design tokens equals styling freedom, where I convert the look to this original look using the new design tokens available. So search for that and it'll help out :) P.S. there is no extra code required to build this apart from what's in the tutorial itself, so there's no special styles.scss file

[@empireofhearts]

@zoaib Khan Absolutely great work. Can we get some clarification on how to get z-elevation working when using custom theme?

[@ZoaibKhan]

Does it not work as it is?

[@empireofhearts]

@@ZoaibKhan no as soon as you use light & dark theme colors from theme builder the elevation classes dont work. Im referring to pure M3 theming. no m2 compatability.

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

[@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

[@wiliam334]

how did you managed to not get the defaul blue material components?

[@ZoaibKhan]

Can't recall. Are you getting them visually different?

[@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

[@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 😍

[@kasunvimarshana3342]

Clean and detailed. Thank you!

[@ZoaibKhan]

Glad you liked it!

[@IbrahimMouhsine]

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

[@ZoaibKhan]

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

[@IbrahimMouhsine]

@@ZoaibKhan In any project

[@IbrahimMouhsine]

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

[@Joechen-q6w]

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

[@ZoaibKhan]

Check the second part!

[@Joechen-q6w]

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

[@ZoaibKhan]

@@Joechen-q6w Glad you found it useful :)

[@GiddaiahKummari-si6or]

I just love your session, can you please shae the github url for your project

[@ZoaibKhan]

Hey thanks. The code is available on my shop only (for now). You can check the link in the description

[@codeaz5673]

hello sir, thank you for this tutorial! Can u please create a video how to create responsive admin panel from scratch with angular 18 and angular material. There are no resources for this topic on internet. It would be very helpful. Thank you in advance!

[@ZoaibKhan]

There is something similar already. Check out the Angular dashboard playlist on my channel

[@mohamedbirali803]

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

[@ZoaibKhan]

Thanks man! 🙏

[@hoangtoan9836]

Hope Part 2 soon !!!!

[@ZoaibKhan]

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

[@funatics6782]

WHY ARE YOU CODING FRONT END IN .TS INSTEAD OF HTML?

[@ZoaibKhan]

Because I prefer working with single file components. It helps me keep a component small, contained in one file and also make changes quickly without needing to switch files all the time. But it's a matter of preference - if you like separate html files, feel free to use the same pattern! :)

[@BlackbirdStudiosBXL]

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

[@ZoaibKhan]

Glad it was helpful! :)

[@NFM-nb7dl]

pls make that rtl

[@ZoaibKhan]

You mean right to left? material.angular.io/cdk/bidi/overview

[@jamesquinlan2638]

Great stuff boss!

[@ZoaibKhan]

Glad you liked it!

[@LarsRyeJeppesen]

Amazing, thanks

[@ZoaibKhan]

Glad you liked it!

[@axitpoojara]

great explanation thanks a lot

[@ZoaibKhan]

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

[@codeaz5673]

thank u Sir

[@TheAlejandro1094]

Awesome! Thanks so much !

[@ZoaibKhan]

Welcome 🙂

[@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

[@ysacpebes1462]

hermoso!!!! part 2 👏🙏😊

[@ZoaibKhan]

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

[@juniorngomajose9454]

Thank You

[@ZoaibKhan]

You're welcome 🤗

[@Labiqakhan]

Thankyou.

[@poojaagrawal4514]

shandar