Create a Responsive Sidebar Menu with Angular Material
HTML-код
- Опубликовано: 24 май 2021
- Learn how to create a #responsive sidebar navigation menu with #Angular #material!
The complete code is available here.
github.com/thisiszoaib/angula...
💖 Support my shop at Buy me a coffee:
www.buymeacoffee.com/zoaibkha...
📽️ Full stack Angular + Firebase course (50% off):
www.udemy.com/course/angular-...
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Other socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :) 
Наука
![Darren Waller - Who Knew (Her Perspective) [Official Video]](http://i.ytimg.com/vi/GytDjB8u6bM/mqdefault.jpg)
Wondering how to add basic routing to this app? Check out my follow up video with a guide on how to add basic routing and a few tweaks to make this even better!
ruclips.net/video/8hVP6jZ-gOM/видео.html
SIR ANGULAR MENU KO BORDER KAISA DA🙏
To the point, elegant, short, concise. Wonderful tutorial. Thanks a lot !
Just wanted to thank you for this video! It's really well explained and doesn't go around the bushes. Really great tutorial!
Clear, concise, and to-the-point tutorial :) Great job Zoaib!
Crispy and Clear content. Thanks for the work!!!
You're welcome Jeeva!
I was struggling with this as I am coding after a long time since material 7. This video gave a very nice clarity. Thanks for the tutorial. Keep up the good work.
Thanks Ronak! Glad it helped. Are there any other tutorials you'd like? :)
I'm loving your Angular content. I've got a subscriber. Thanks for the work. Take care.
Hey Daniel! Thanks for the compliment and subscription :)
I'll do my best to bring in more useful content!
Cheers
great job Zoaid! perfect example
Thank you Zoaib, you're the best. Hello from Guatemala!
Hey Pablo! Hope Guatemala is doing good :)
Thanks for the kind words!
Needed this for my work, thank you for much for the tutorial!
You're welcome :)
Thank you for your effort Zoaib
Excelent video! Helped me a lot!
What an amazing video! Really thank you very much, you helped me a lot, you saved my life. Thank you for contributing to education and the community. Blessings!
You're very welcome, Alejandra! Glad you found it useful :) Feel free to share any other tutorial you'd like and I'll add it to my upcoming list!
Thank you for thie great tutorial - just what I was looking for! I do have one small issue, which I'm sure is an easy fix - but when you refresh the page, the sidenav and content slide in from the left - I would prefer it just load in the correct position without any slide action - how would I achieve that?
Thank you soo much! Exactly what I was looking for! :)
Great!
Excellent as usual, why don't you make more videos?
Thank you sir, today I had deadline to make sidebar, this video helped me a lot and saved time. Thank you. Make more videos.
Glad that it helped!
You're awesome. Excellent content. Thanks for your time
Oh, you're awesome as well :)
Glad you found it useful!
I'm from Thailand. Thank you teacher.
You're welcome, student! How is Thailand doing? :)
@@ZoaibKhan it rains every day :)
@@plumemotorpartpmp1625 must be fun? :)
Thank you very much! Nice tutorial!
You're welcome!
great video. thanks a lot!
Very cool video, thank you for sharing :)
You're welcome, Esther :)
Thank you for this tutorial!!!
Glad it was helpful!
Perfect tutorial oh How to create a responsive sidenav, congratulations and thank you very much man
You're welcome :)
@zoiab
Really it is to the point.
Thank for great content!
Highly appreciate your efforts 👏!
Thanks Suraj! Means a lot ☺️
Gracias por compartir.....
no se necesita conocer el idioma para entender lo que hiciste....
me sirvió mucho para mi proyecto...
gracias!!!
¡De nada, Víctor! Y muy amable de su parte para felicitar :)
Espero que también encuentres buenos mis otros videos. ¡Los comentarios son siempre bienvenidos!
Thank you for the content !!
My pleasure Weslley! :)
kindly make more like this for all angular concepts
Thanks Arslan! What other concepts are you interested in - so I can build upon that? :)
Gracias!!! seguiré el paso a paso :D
That's nice..really appreciate it! Thanks for sharing your knowledge! Please make a video on full admin panel build..
Thanks Ancode for your feedback! It keeps me going :)
About a full admin panel build, it's a major project. Can only be discussed in bits and pieces, but will try to come up with something :)
@@ZoaibKhan I would like to watch your hours of work it's simple efficient and easy to understand. Keep uploading Sir.
Excelente, gracias por el video
very useful thanks
Hi Zoaib, thanks for the excellent tutorial! I have actually implemented this in my project, the problem is when on mobile I navigate to another component with the open sidenav it does not close automatically after routing. Would appreciate if you could help on this
Could you show me your code a bit in a stackblitz or some other way? It would be difficult to say anything otherwise
Awww buddy... seriously helpful for me...
You're welcome Vijay :)
Hi Zoaib, Great Tutorial! Thank you so much for sharing. Also, could you please show me how can I add a submenu in a sidebar?
Thanks Fatema! You're welcome :)
For a submenu, you could use a material tree component. Docs here:
material.angular.io/components/tree/examples
That could be the subject of another video :)
Very good and clear explanation sir! that helped me a lot. Could you please tell me how to use sidenav mode "over" when there is no sidenav-content? I my project I had decoupled sidenav with content, here in my case, I have removed sidenav-content from sidenav-container and in my app.component.html the code like this
I'm unable to use sidenav mode="over" and "push". Hope I will get reply or any working example. Thanks in advance
Thanks Sekhar!
The sidenav is meant to be used in a certain way, so the main content area has to be wrapped inside the mat sidenav container to work properly. Is there any particular reason why you can't or don't want to do that in your project?
I have an error in modual.ts (app routing , app component )is not a module please help
Thank you so much!!!
You're welcome, Alex! :)
Cool tutorial, with old material versions it was difficult to me do this, now i'm working with material 12 and this help me soooo much to understand, now in going to programe it. Do you have any tutorial of Modals or Dialogs in material?? Thanks in advance
Maybe could you make more tutorials of ViewChild and ViewChildren? 🙌
Glad to hear that Yusbely!
I have a few tutorials about material dialogs. One is about creating reusable material dialogs for confirmation. It's in my video uploads.
If you want anything specific, I'd love to create one for it :)
@@ZoaibKhan ok perfect, thank you, I'll see in your channel! 👍🏽
buen video pero si quisiera que al dar click en algun enlace tambien se cierre el menú que propiedad debería usar?
Hey Eduardo! Please refer to the follow-up video to this in which I add routing and also show how to automatically close the menu on route change.
ruclips.net/video/8hVP6jZ-gOM/видео.html
Hello, I really appreciate your work, I have a problem of styling css in the content navbar, when I add a table to the content it won't be responsible ( I but the width of the table to 100% but still don't work) can you help me? Thanks
Hey Mariem! Thanks for the compliment. Could you show me the problem in a stackblitz app or a video?
@@ZoaibKhan Thanks for the response, actually the problem was that the content class had : display: flex; when I remove it , it works fine
Thanks bhai you gave me a great experiance on responsive site make more videos for beginner like me
Sure. Anything particular you'd like videos on?
Nice video!! Can you create a sidenave angular material half close? I'm struggling with creating the component
That's a good idea 💡 I'll try to come up with something hopefully 🙂
@@ZoaibKhan ok thank you!!
This is awesome, material is super cool, thanks for the great video, can you please do a video on how to change the themes (Dark vs Light)
Thanks 🙏 I think you've already found the dark mode video :)
@@ZoaibKhan yes great video please keep up the good work
Great video! The only thing is how can i do the same thing, but having a "header-component" and a "sidevar-component". how can i get the sidevar on my "layout-component".
// HTML of the component "layout-component"
// header code
// sidenav code
Thanks Orion!
You can do the reverse - instead of accessing the material sidenav out side of your custom component, create two functions inside of it to enable mobile or desktop mode and then add the functionality there.
Then just use ViewChild in your layout component to call the relevant functions on breakpoint change.
ohh !!! too good
Great!!
thanks a lot , and why the space between sidebar navigation and sidenav and how to fill this .
Hey Gowtham!
Thanks for the comment. Are you referring to the space on the left side when the sidebar is closed?
Backdrop is not appearing on 'over' mode, help please!
super bro
Curious why your sidenav bar seems to glide in and out yet mine appears and disappears without any sliding animation. Thoughts?
Have you included BrowserAnimationsModule in your app module? Angular material adds that when installing
@@ZoaibKhan Yes I have.
Gracias!
Excellent tutorial!!! Thanks a lot. But I have an error in console after implementation: "ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'." Any idea?
Check the code in description to see a fix to this.
@@ZoaibKhan I solved it by adding "private cdRef: ChangeDetectorRef" in the constructor and "this.cdRef.detectChanges();" at the end inside the ngAfterViewInit()
@@eduardomunozm that will work as well, but usually we avoid calling change detector directly unless absolutely necessary.
@@ZoaibKhan I understand, I made the modifications to implement the code as you have it on your Github. Thanks a lot!
very top, muito bom, bueno!
Thanks 🙏
How can I contact you sir... I have some important doubts ... Please help me sir
What kind of doubts pushpak? You can email on consult@zoaibkhan.com if you can't send a message here
Great job sir..
How to add scrollbar to the buttons only..?
Thanks Amol!
You mean add a scroller to the sidebar only?
@@ZoaibKhan ya but only for buttons not to the profile image..
@@amolgode9843 Oh, in that case, you'll need to enclose the buttons in a parent div, then add styling to fix its height and allow scroll with overflow: scroll.
@@ZoaibKhan thanks..
:)
Hii if my interviewers ask me why you choose angular instead of rest framework for this project..?
So what is best answer for this.. !
I need an admin project with firebase please
But how to reuse for entire application that means header and left side navbar
Simple: add your pages as routes and add a router outlet in content area.
Can you tell me how to add router outlets to this?
Thanks Bilal!
You just put in the sidenav content section (where I've added the "Main Content" text). Then just define your routes and they should show up at that place.
@@ZoaibKhan it's not working
Hii sir your videos are so useful. I want to make a chatting app using Django Rest API and Angular, So can you make a beautiful Responsive Angular UI.
Thank you in advance... ;)
I'm thinking about doing a series on building a chat app with firebase. So that might cover the UI part of it as well. Hopefully in a while 🙂
@@ZoaibKhan Thanks... 😄⭐️⭐️⭐️
Please start as soon as.. 😊
how to make a collapsible sidenav ... that is better for a smaller windows..thanks
Hey Praveen!
Could you show me an example of what you mean by a collapsible sidenav?
@@ZoaibKhan i think its toggle menu
there is a toggle in this as well. Or do you mean some other toggle?
where did you get the templates
What templates are you talking about soundarya?
nice video! i hope you can create more angular framework with angular material websites.... im willing to donate any amount
Thanks Berthem! What kind of websites do you mean?
@@ZoaibKhan can you create a social media app using angular material, ngrx and some advance angular features like lazy loading route, observables and subjects... I hope you can create one...
can i do tNice tutorials with the trial version?
Which trial version?
F-antastic Genius!!!!
Clear, concise, and to-the-point tutorial :) Great job Zoaib!
Glad it was helpful! :)
@@ZoaibKhan thanks you. You are great 🚀🚀🚀