Pretty much all pages need a responsive navigation. Angular Material has all the Angular components you need to build a nice looking and fully responsive navigation for your Angular app. Angular Material is a rich suite of pre-built Angular components that follow the Google Material design spec. This tutorial explores the Angular Material data table and how to use it!
———-
Build a complete Angular App with Angular Material, Angularfire, NgRx & More: https://acad.link/ng-app
Further Resources (incl. Link to Code): https://www.academind.com/learn/angular/angular-material-a-thorough-guide/responsive-navigation
Want to learn something totally different? Check out all other courses: https://academind.com/learn/our-courses
———-
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.(https://www.facebook.com/academindchannel/)
• Or visit our Website (https://www.academind.com) and subscribe to our newsletter!
See you in the videos!
———-
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
source
That was great! Thank you.
best explanation
Max is the best instructor. I have taken several of his Udemy courses and they have all been excellent and very high quality. Thanks for explaining this Material nav schematic. Exactly what I was looking for.
I was able to generate the main-nav, but when I add it to app.component.html it doesn't show the content, is just a white page
I put slidenav main for lg,and md..but i need on mob point to be on top..explain ?..
Hi. thank u, very very much. this video help me understand how to make responsive navigation on angular
with the new angular version, after you type in ng generate @angular/material:material-nav you will get prompt for the component name. The –name is obsolent and doesn't work anymore.
Needed to use
ng generate @angular/material:material-nav –name side-nav
to get the code generated
Great course on Angular material. Nice components and direction.
My toolbar in the left sidenav looks different, it doesnt have the primary color but gets a different style because its in the sidenav. 🙁
Welcome to Connekt Teacher Digital Library Angular Videos. Free Online Angular 2022 Tutorials and Courses. The Complete Angular Developer Course 2022 http://connektteacher.com/vdbysubjectList.php?id=35
💖
Thank you very much! Excellent explanation!
Thank you it is help full
How would we be able to show the hamburger option always on a full screen?
I had a problem when i tried
ng generate @angular/material:material-nav –name=main-nav
I got this error
Could not find (/.angular.json)
Help, please!
How can I integrate angular routing with this navigation in place ?
ng generate @angular/material:material-nav –name=main-nav
Very useful ,How to hide the side navigation in login page . thank you
I love your classes!!!
You can also use mode over
Thank you for the tutorial
Thank you so much. You are awesome!
this is best video thank you keep rocking i'm waiting for more video like this
Is there a way to make the menu/sidenav button always appear, even on higher resolutions? Because when i set the breakpoint to 2000px the sidenav still works on a 1920×1080 webpage but it is permanently opened and I don't want that. I want the menu hidden on full hd, with the button still appearing and working.
Thanks a lot…
is it me or the current angular material documentation is worse than it used to be?
The main-nav component you can generate with angular material was exactly what I was trying to do on my own. Great to see how the Angular team actually does this!
Thanks a ton…I was wasting my time on google to create this nav ….finallly got on youtube 🙂
You have my like. Awesome material of material hehe.
bit outdated but still a great presentation to learn in great details
Does anyone know how to stop the sidenav from flickering on/off when you change the window size?
Has anyone else had problems with the side toolbar on iphone?
navigation cmd not working in angular9
yes, this solution is very impressive
but I have one question how to apply on tablet screen responsive?
Max please address many errors faced after updating to angularIvy
How to set the Navigation header in the center of Navigation bar?
Hi Max, it seems few adjustments which you make after you create the default navbar using ng generate @angular/material, is now rectified in the newer version. Can you please put a note.
the video is good but the way material purpose to implement the nav bar us horrible. I prefere create from scratch a new nav bar with side nav…
how do you remove the navigation links when you make the screen smaller?