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 `
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!
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.
This is awesome Max but I was wondering how to add router outlet with a Navigation? I can do it easily with bootstrap but I don't know how to do it with Angular Materials.
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 ^_^
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?
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
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
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.
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
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
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
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.
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
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.
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
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 }" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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.
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
if your're getting the pipe error: ERROR in : The pipe 'async' could not be found be sure to import the common module from angular/common as shown below... import { CommonModule } from '@angular/common'; @NgModule({... imports: [ CommonModule],...
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?
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 @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
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?
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???
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.
Is it possible to make the toolbar a colour that isn't the primary or accent from the theme? I'm trying to make a particular section of it a different colour and it won't let me.
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
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.
Thanks a ton...I was wasting my time on google to create this nav ....finallly got on youtube :)
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 :)
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
So glad I'm taking his class!
Hi. thank u, very very much. this video help me understand how to make responsive navigation on angular
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 :)
I love your classes!!!
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 `
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!
this is best video thank you keep rocking i'm waiting for more video like this
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 :)
That was great! Thank you.
You have my like. Awesome material of material hehe.
You can also use mode over
Thank you for the tutorial
great video, great teacher ! thanks
And what a great comment, thank you very very much :)
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
Max, you are a ridiculous good teacher. Thank you for all your work. I love your udemy courses.
Awesome! Perfect for me in this moment.
Great to hear, thank you so much!
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!
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!
I'm yet to watch....but thumbs up mate!
Thank you for your awesome support Oluwasegun!
Very useful ,How to hide the side navigation in login page . thank you
Thank you so much. You are awesome!
Nice tutorial again. Thank you
Happy to read that Martin, thanks a lot!
best explanation
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
This is awesome Max but I was wondering how to add router outlet with a Navigation? I can do it easily with bootstrap but I don't know how to do it with Angular Materials.
There's nothing special to it actually, you can just embed anywhere in your templates where you want to load a route
Cool, I figured it out.
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 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?
Great course!
Thanks.
Good Job Maximillian
Thank you for your great feedback Ayoub!
This was so useful thank you
Thank YOU for your comment :)
Very well explained. Thank you for sharing my friend...
Happy to read that you liked it Shy, thank you!
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
Can you please make a video for achiev this with bootstrap.
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! :)
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
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?
Great video! awesome! many thanks!
YOU are awesome Luis, thank you for your support!
Thanks You so much for such that tutorials
Thanks so much for your comment, happy to read that you like the video!
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.
Great presentation... do you have a transcript?
Thank you Dennis, I don't have a transcript though, sorry.
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?
Thank you it is help full
How to set the Navigation header in the center of Navigation bar?
Thank you so much. This is great
So cool to read that Peter, thank you very much for your comment!
I put slidenav main for lg,and md..but i need on mob point to be on top..explain ?..
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
Please please do a video on angular material responsive flexlayout
Anyone found out how to change the breakpoint? Ps. I love your content Maximilian
My toolbar in the left sidenav looks different, it doesnt have the primary color but gets a different style because its in the sidenav. :-(
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
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 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
Hi, I followed the cli to generate the files but there is no snippets for fully nav. Only a navigation works!
Hi Max, How do u hide the main nav links that you show in desktop view when hamburger sign appears.
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
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
How would we be able to show the hamburger option always on a full screen?
excellent, do you recommend using PrimeNG components?
bit outdated but still a great presentation to learn in great details
Do you have an example where the user may resize the side bar?
Hi, nice video, may I ask how to fix the toolbar at the top?
use inside tag
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!
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.
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?
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
Good video, this video is very useful for me.... :)
So happy to read that the video is helpful, thanks a lot for sharing this!
thank you ! Great video
Thank YOU for your comment Yue!
How can I integrate angular routing with this navigation in place ?
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 }"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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 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
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
yes, this solution is very impressive
but I have one question how to apply on tablet screen responsive?
if your're getting the pipe error: ERROR in : The pipe 'async' could not be found
be sure to import the common module from angular/common as shown below...
import { CommonModule } from '@angular/common';
@NgModule({...
imports: [ CommonModule],...
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?
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
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 :/
how do you remove the navigation links when you make the screen smaller?
please explain how to retrieve json data into this datatable
So helpful!
Thank you Ruslan!
Does anyone know how to stop the sidenav from flickering on/off when you change the window size?
Hey, how to change breakpoint, when to show hamburger? Thanks
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??
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?
What about ngx-bootstrap navigation? Is it better to use or no?
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???
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.
ok! but there is any way to handle on click close sidenave on mobile device if any link is clicked?
Is it possible to make the toolbar a colour that isn't the primary or accent from the theme? I'm trying to make a particular section of it a different colour and it won't let me.
In fact, is it possible to make the background of the toolbar a picture instead of a colour?
You can add simply css to get it done
e.g - Menu
How we can get responsive mat-form-field inside a toolbar ?