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!
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 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.
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 `
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.
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?
@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.
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
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?
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!
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 ^_^
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.
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.
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
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 :/
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
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: ruclips.net/video/VqCgcpAypFQ/видео.html
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.
As written below the other video, I'm using Angular 6 here, the versions can also be seen here: ruclips.net/video/u679SQsfRVM/видео.html&lc=Ugzim7KNcDkF5L1ZEXB4AaABAg&t=6m52s
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
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
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.
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 😅
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.
Hey am stuck I have a navigation menu in a parent component but when I press on a link to a child component.. The navigation menu appears in the top of the child. How will I hide the navigation from the child or make it not appear in the child component. Do you have any video tutorial for that in angular 4. Please help. Its urgent.
Please be aware of that this is not an beginners tutorial. For me and most of the others everything works fine. Everyone who has serious trouble rebuilding this example should maybe just take the full angular course on udemy (there are some good ones for free too, if udemy is out of your price range) from the beginning.
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???
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.
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
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?
Anything that you want to be wired to an item in your nav (it shows only when that nav item is clicked) should be inside . Usually, this applies to just about everything (except maybe a site footer that will always be visible and unchanged).
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.
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 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!
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 !
Great course on Angular material. Nice components and direction.
Thanks a ton...I was wasting my time on google to create this nav ....finallly got on youtube :)
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 `
Excellent.
Many thanks Maximillian and Academind team!
Muchas gracias!!!
Thanks so much for your fantastic feedback Raffaella, this honestly means a lot to us :)
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
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.
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.
So glad I'm taking his class!
Great stuff mate you never fail to deliver :)
I love your classes!!!
Max, you are a ridiculous good teacher. Thank you for all your work. I love your udemy courses.
That was great! Thank you.
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!
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 :)
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.
You can also use mode over
Thank you for the tutorial
this is best video thank you keep rocking i'm waiting for more video like this
Very useful ,How to hide the side navigation in login page . thank you
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
Great presentation... do you have a transcript?
Thank you Dennis, I don't have a transcript though, sorry.
You have my like. Awesome material of material hehe.
Hi Max, How do u hide the main nav links that you show in desktop view when hamburger sign appears.
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
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 😊
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?
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!
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?
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
great video, great teacher ! thanks
And what a great comment, thank you very very much :)
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.
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!
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.
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!
excellent, do you recommend using PrimeNG components?
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
Thank you so much. You are awesome!
Can you please make a video for achiev this with bootstrap.
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 :/
Hi, I followed the cli to generate the files but there is no snippets for fully nav. Only a navigation works!
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
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
Anyone found out how to change the breakpoint? Ps. I love your content Maximilian
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
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: ruclips.net/video/VqCgcpAypFQ/видео.html
I'm yet to watch....but thumbs up mate!
Thank you for your awesome support Oluwasegun!
This was so useful thank you
Thank YOU for your comment :)
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! :)
Great course!
Thanks.
Very well explained. Thank you for sharing my friend...
Happy to read that you liked it Shy, thank you!
Hi, nice video, may I ask how to fix the toolbar at the top?
use inside tag
bit outdated but still a great presentation to learn in great details
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
best explanation
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: ruclips.net/video/u679SQsfRVM/видео.html&lc=Ugzim7KNcDkF5L1ZEXB4AaABAg&t=6m52s
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?
Please please do a video on angular material responsive flexlayout
Do you have an example where the user may resize the side bar?
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
Good Job Maximillian
Thank you for your great feedback Ayoub!
Thank you it is help full
8:45 how would you find out which breakpoint was used in material and modify it?
I am also interested changing the breakpoint, did you find out how?
yes, this solution is very impressive
but I have one question how to apply on tablet screen responsive?
Great video! awesome! many thanks!
YOU are awesome Luis, thank you for your support!
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
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
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 so much. This is great
So cool to read that Peter, thank you very much for your comment!
how do you remove the navigation links when you make the screen smaller?
So helpful!
Thank you Ruslan!
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 😅
Thanks You so much for such that tutorials
Thanks so much for your comment, happy to read that you like the video!
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.
What about ngx-bootstrap navigation? Is it better to use or no?
Hey, how to change breakpoint, when to show hamburger? 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?
please explain how to retrieve json data into this datatable
How can I integrate angular routing with this navigation in place ?
Max please address many errors faced after updating to angularIvy
How we can get responsive mat-form-field inside a toolbar ?
Mine appears as text with no design whatsoever, is this the update of Angular or am I missing something?
Thank you either way :)
Hey am stuck I have a navigation menu in a parent component but when I press on a link to a child component.. The navigation menu appears in the top of the child. How will I hide the navigation from the child or make it not appear in the child component. Do you have any video tutorial for that in angular 4. Please help. Its urgent.
this just doesnt work for me ive spent hours trying and nothing works it just shows a blank screen
Please be aware of that this is not an beginners tutorial. For me and most of the others everything works fine. Everyone who has serious trouble rebuilding this example should maybe just take the full angular course on udemy (there are some good ones for free too, if udemy is out of your price range) from the beginning.
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.
thank you ! Great video
Thank YOU for your comment Yue!
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???
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.
If i need make the sidenav vertical, how could i do it?
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??
ok! but there is any way to handle on click close sidenave on mobile device if any link is clicked?
I put slidenav main for lg,and md..but i need on mob point to be on top..explain ?..
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?
I am confused, about the idea of rest of the content between this ???
Anything that you want to be wired to an item in your nav (it shows only when that nav item is clicked) should be inside . Usually, this applies to just about everything (except maybe a site footer that will always be visible and unchanged).