Angular Material Responsive Navigation Tutorial
ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2024
- 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: acad.link/ng-app
Further Resources (incl. Link to Code): www.academind....
Want to learn something totally different? Check out all other courses: academind.com/...
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (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!
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!
you know right. really a pain.
I just love this guy... His coding style and teaching style just awesome..
It really brings a smile to my face if I read such comments, thank you very much Farzana!
One of the best tutorials i have seen on Front End.
The way the topic is explained methodically is superb!
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.
Great course on Angular material. Nice components and direction.
Great Video Max @Academind
, i just figured out that you can hide the menu in desktop mode by deleting the [opened] binding from the "mat-sidenav" tag.
Yeah It works !
Excellent.
Many thanks Maximillian and Academind team!
Muchas gracias!!!
Thanks so much for your fantastic feedback Raffaella, this honestly means a lot to us :)
Thanks a ton...I was wasting my time on google to create this nav ....finallly got on youtube :)
Hi. thank u, very very much. this video help me understand how to make responsive navigation on angular
Thank you for this.
My online teacher.
Even in 2020 this helped me tremendously. Thank you!
Happy to read that, thank you for your comment!
Did you have a problem when trying to auto generate? I am getting an error saying that it cant find a package.json
@@natetolbert3671 you have to install Angular Material
ng add @angular/material
I love your classes!!!
So glad I'm taking his class!
That was great! Thank you.
this is best video thank you keep rocking i'm waiting for more video like this
You can also use mode over
Thank you for the tutorial
If you can't show the text written inside *text* ... in the main-nav.component.html there is an area that says ... I putted there and it works now.
Great stuff mate you never fail to deliver :)
You have my like. Awesome material of material hehe.
Wonderful !!!!!!!!!!! Thanks Man .. you are really a great TEACHER
What more can I say but thank YOU Obed for your wonderful feedback, so happy to read that :)
Max, you are a ridiculous good teacher. Thank you for all your work. I love your udemy courses.
Dude... That is Fantastic...
Thank you very much for this short and sweet explanation!
Thank YOU - I'm very happy to hear you enjoyed this video!
For anyone trying to generate the material components in 2020 - they have changed, so it depends on what version of the material library you are using.
To update to the latest material version (8.2.3 at the time of writing) use `ng update @angular/material`
Then, to generate the navigation bar, use `ng generate @angular/material:nav `
Side note: do *not* include 'component' in the above command as you may have done for generating other components using the angular cli i.e. ng generare *component* @angular/material:navigation --name *is wrong*.
Hope that helps.
Version 9 of @angular/material is almost released, and they will change the schematics, and thus the command to `ng generate @angular/material:navigation `
Thank you for the great learning video. You are the best!
Thanks so much, this really means a lot to me :)
danke das es krüppeln gibt wäre ich gar nich hier bei denn krüppeln alter hahahahahahahahahahahahahahahahahahaha
Very useful ,How to hide the side navigation in login page . thank you
Thank you so much. You are awesome!
Awesome! Perfect for me in this moment.
Great to hear, thank you so much!
Nice tutorial again. Thank you
Happy to read that Martin, thanks a lot!
Tnx a lot man, You just saved me a lot of time!
That's just great to read Filip, thanks a lot for sharing this!
great video, great teacher ! thanks
And what a great comment, thank you very very much :)
great explanation, but I don't get why the main horisontal nav should be inside mat-sidenav-content and where should my actual pages content actually go?
Hi @Max
After adding this line [ngClass]="{hidden: !(isHandset | async)!.matches}" I m not getting the header itself I am seeing only button
please help me
Me pasa lo mismo encontraste solucion??
Another awesome video! Sir your express rest API playlist shown us how to upload images in a public folder but I don't know how to delete the image from that folder I'm struggling with storing image into the mongodb. Love and support from India
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 1920x1080 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.
I took some useful tidbits from this video, such as that the toolbar is not limited to just one. What I find confusing is that sidenav-container is actually a wrapper for entire page. This is very misleading - you created a main-nav component but it is actually not just nav, it is a wrapper around everything. So it needs ng-content to be consumed properly.
This was so useful thank you
Thank YOU for your comment :)
Using Bootstrap 3 with Angular 8,the Navigation items are displayed with a Bullet symbol and the Header and Navigation Items are not in a line?
Hi, I followed the cli to generate the files but there is no snippets for fully nav. Only a navigation works!
Very well explained. Thank you for sharing my friend...
Happy to read that you liked it Shy, thank you!
Great course!
Thanks.
Hi Max, How do u hide the main nav links that you show in desktop view when hamburger sign appears.
Hey Max. I have an angular project with ng-version="5.2.11". Is there a way to generate the `main-nav` for version 5?
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!
That's the video I was looking for: angular material explained! Thanks
But..It would be nice if you could show how to make the main toolbar (the one which has the title app) fixed to the top page in order to have the content scrollable ^_^
use inside tag
ERROR in src/app/main-nav/main-nav.component.ts(13,3):
error TS2322: Type 'Observable' is not assignable to type 'Observable'.
Type 'boolean' is not assignable to type 'BreakpointState'. how do i solve this problem?
Great video! awesome! many thanks!
YOU are awesome Luis, thank you for your support!
Anyone found out how to change the breakpoint? Ps. I love your content Maximilian
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.
Thanks for the class, Max! But I have a question about the "ng g @angular/material:" ... There have a list of the commands that I can generate a especific component, like cards? Kinda the "ng g @angular/material:material-nav" generates the material navigation, "/material:material-example" generates some component and etc. Also, sorry for my bad English :/
My component css and html look little different from that of video, maybe angular material has updated the navigation. Nevertheless, great video! Will definitely buy more lessons from you on udemy!
Good Job Maximillian
Thank you for your great feedback Ayoub!
Can you please make a video for achiev this with bootstrap.
I'm yet to watch....but thumbs up mate!
Thank you for your awesome support Oluwasegun!
Thanks Max! Unfortunaly the ng generate @angular/material:material-nav --name=main-nav doesn't work. It gets a lot of errors. And I do have angular 6. So what to do?
same here
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
ng generate @angular/material:material-nav --name=main-nav
@Sophie Dubbeldam You have to look at the main-nav.component.ts at the selector. It is actually app-main-nav NOT just main-nav. So if you put app-main-nav in your app.component.html the errors go away.
You probably forgot the before the
Dictionnaire It did not work
excellent, do you recommend using PrimeNG components?
I am using material and cdk version 6.4.1 and angular 0.6.8 and I am getting the following error:
"Schematics/alias "materialNav" collides with another alias or schematic name.
Error: Schematics/alias "materialNav" collides with another alias or schematic name."
I have followed the steps as described under Sopie' s post below but I still cant seem to get it fixed.
An unhandled exception occurred: Schematic "ma" not found in collection "@angular/material".
See "C:\Users\PC\AppData\Local\Temp
g-OuFZDz\angular-errors.log" for further
details.
hi, I am also facing the same problem, did you find any solution? thanks
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
ng generate @angular/material:material-nav --name=main-nav
Thanks You so much for such that tutorials
Thanks so much for your comment, happy to read that you like the video!
Hey Max, what's the difference between using "!" and "?" to cater for null values? Thanks
if you declare, for instance, "value?: string" in an interface or class field, it's the same as saying "value: string | undefined". if it's in a function parameter, it means the parameter is optional. basically, you're telling typescript to be careful with the value because it might be undefined. however, if you declare "value!: string" in a field value (without initializing value), you're telling typescript that, you're sure that it will be initialized, therefore it assumes that the value is really a string, despite you not having initialized the value
very gud and helpful Video. Your tutorials are really helpful, I have learned a lot from you.
I am facing some problem to create footer in this layout. Can you please suggest, can we use bootstrap 4 in it and please suggest how to add bootstrap in it.? Is this gud practice to bootstrap in angular material? I think there is very less component to customize layout as per our design. Waiting for your quick response. Thanks
How would we be able to show the hamburger option always on a full screen?
How to set the Navigation header in the center of Navigation bar?
Great Video Max. Your tutorials are really helpful, I have learned a lot from you.
I am facing some problem regarding final university project and I could really use your help. My final year university project is near and I haven't decided what to build yet. The frameworks I am good at are Angular, React, Vue and Node.js. Can you please suggest what projects I can build with these frameworks as a final year project?
Thanks 😊
Happy to hear you're liking my content - thank you so much! :)
Regarding projects: You can really build anything. Take any web page/ web app and build a simplified clone. Build your own Amazon-like shopping page (with a limited set of features of course). Build your own social network. These are all great practices
Academind Thank you for your respone. Your reply has been really helpful. Keep making awesome tutorials and stay blessed 😊
Thank you so much. This is great
So cool to read that Peter, thank you very much for your comment!
Excelent video but i have a issue; How i can to make a little padding in the ng-content?
LUL i solved XD. with a div and add a class; put the ng-content into the div
i'm using angular 8 and the fixedInViewport is not working i have it like this :
#drawer
class="sidenav"
fixedInViewport="false"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="(isHandset$ | async) === false">
but it's not hidding the sidenav, how can i change that?
why when I add: [ngClass]="{ hidden: !(isHandset$ | async)!.matches }" i get only dark area on side menu? In my generated code, I get the observer like Observable, but you get Observable
Well, I put it to work, you just need to remove (!.matches), because in the header.componenebt.ts, we have a map that map Observable to Observable
Thank you it is help full
Awesome! Please create a serie of videos of React Native with Native base or Material UI for React
Thanks for the great feedback + the suggestion! :)
I put slidenav main for lg,and md..but i need on mob point to be on top..explain ?..
Hey Max, Thanks so much for the video! Is there a way to specify where in your app you want the cli to create the project?
you should write its path in the project
Error occurs in the template of component MainNavComponent.
src/app/main-nav/main-nav.component.html:5:28 - error TS2339: Property 'matches' does not exist on type 'boolean'.
5 [ngClass]="{ hidden: !(isHandset$ | async)!.matches }"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Thank you for the video very nice !
Btw I would like to know which theme do you use for visual code ? thanks
Awesome to read that you like the video Pierre, thank you for sharing this! I use the Dark+ theme, here you can also see the extensions we are using: th-cam.com/video/VqCgcpAypFQ/w-d-xo.html
My toolbar in the left sidenav looks different, it doesnt have the primary color but gets a different style because its in the sidenav. :-(
Hi Max, I had a question about the React/Redux course available on Udemy. I was wondering if you cover forms and validation using Redux in it. I am currently enrolled in a bootcamp but am finding out, much to my dismay, that I most likely could have just used Udemy and learned everything for a few hundred $ at most.
Thank you for your contributions for us, I hope you can create a project with Angular Material
Thank YOU for your comment Richard! I actually got an entire course about Angular Material where we build a fitness tracker, maybe this is also interesting for you: www.udemy.com/angular-full-app-with-angular-material-angularfire-ngrx/?couponCode=ACAD_M
Side bar Icon not showing here, just the Menu. and the entire side bar display. Any help?
I had to load this: in index.html to make it work. Hope it helps someone
yes, this solution is very impressive
but I have one question how to apply on tablet screen responsive?
Great presentation... do you have a transcript?
Thank you Dennis, I don't have a transcript though, sorry.
Do you have an example where the user may resize the side bar?
How can I integrate angular routing with this navigation in place ?
Please please do a video on angular material responsive flexlayout
thank you ! Great video
Thank YOU for your comment Yue!
best explanation
how do you remove the navigation links when you make the screen smaller?
I have a problem, the menu icon doesn"t show up on my page
bit outdated but still a great presentation to learn in great details
Hi Max. I have tried this [ngClass]="{hidden: !(isHandset$ | async)!.matches}" but it does not work
[ngClass]="{hidden : !(isHandset$ | async)}" works using angular 6.1.9
Works for me too in Angular 7. I dont really get this .matches thing.
@@taivon life saver
Hi, nice video, may I ask how to fix the toolbar at the top?
use inside tag
I love your courses, but could you please use a different platform? I struggle to get Udemy to take my money.
Sorry to read that you're unhappy with Udemy, we're very happy with it to be honest.
@@academind I just want to buy the course and Udemy isn't cooperating. I really enjoyed your Python course and know I'd love this one too.
What about ngx-bootstrap navigation? Is it better to use or no?
Please specify the version of angularjs and angular material used in this training in the video description
As written below the other video, I'm using Angular 6 here, the versions can also be seen here: th-cam.com/video/u679SQsfRVM/w-d-xo.html&lc=Ugzim7KNcDkF5L1ZEXB4AaABAg&t=6m52s
ok! but there is any way to handle on click close sidenave on mobile device if any link is clicked?
Max please address many errors faced after updating to angularIvy
Does anyone know how to stop the sidenav from flickering on/off when you change the window size?
Getting this error :
An unhandled exception occurred: Cannot find module '@angular-devkit/schematics'
See "C:\Users\WS\AppData\Local\Temp
g-dEnN3c\angular-errors.log" for further details.
Any tips for angular 1.X? I’ve been studying react for a good while now and feel comfortable with it and then I was offered an internship in none other than angularJS, specifically Angular 1.4 and I have no idea what the hell im doing 😅
Hi Max,
Prunkvollen Video.
After generating Nav menu there is no (!.matches) typescrip operator in the code: Whenever I added this (!.matches), I got the below error can you look it please.
ERROR TypeError: Cannot read property 'matches' of null at Object.eval [as updateDirectives] (SidemenuComponent.html:5)
[ngClass]="{hidden: !(isHandset$ | async)}" solution!
The "c" alias is already in use by the "--collection" option and cannot be used by the "--change-detection" option. Please use a different alias. ..............................how can i solve this problem???
So helpful!
Thank you Ruslan!