Create a YouTube sidebar clone with Angular Material Components! (Part 3 - Animations)
Вставка
- Опубліковано 23 жов 2023
- #Angular #Sidebar #animation
Get the FINAL code for the sidebar on this link:
www.buymeacoffee.com/zoaibkha...
In this series of videos, I'll be showing you how to create a UA-cam sidebar clone using Angular Material Components!
📽️ Full stack Angular + Firebase course (50% off):
www.udemy.com/course/angular-...
✍️Blog version of the complete tutorial:
zoaibkhan.com/blog/youtube-st...
Follow for more Angular tutorials, tips and tricks:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :) - Наука та технологія
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 :)
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
Incredibly clear and easy to undestand. Gz
Glad you liked it!
Well explained video, thanks a lot. Your rock!
Glad you found it useful! ☺️
Many thanks for the great tutorial. Could you please provide one more tutorial with nested menu in the sidenav?
Yes I will
Great content, thanks for sharing.
You're welcome 🤗
thanks , it help me a lot
Glad to hear that ☺️
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 :)
Cool !! Thanks a lot !!!
Glad you liked it!
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 UA-cam 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 🙏
nice man
✌
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
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
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!
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.
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
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 :)
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! :)
When is the next video coming ?
This was the last part of the UA-cam sidebar series. Or do you mean next video on the channel? :)
@@ZoaibKhan oh. I thought you clone UA-cam 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