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 `
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.
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, 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'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?
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?
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 }" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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 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],...
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 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.
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.
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
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
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 :/
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.
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.
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
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
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 After adding this line [ngClass]="{hidden: !(isHandset | async)!.matches}" I m not getting the header itself I am seeing only button please help me
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
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
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.
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!
Hello Max, I'm struggling to run the command "ng generate @angular/material:material-nav --name-main-nav" , it is throwing "Error: Schematic "@angular/material-nav" not found in collection "@schematics/angular". I have seen the previous video for Angular material setup and done the set up. Package.json file has '"@angular/material": "^6.3.0",' dependency in that, can you please help me out to fix this? Anyone can help me out?
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 😅
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???
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.
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!
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.
One of the best tutorials i have seen on Front End.
The way the topic is explained methodically is superb!
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 !
Thank you for this.
My online teacher.
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
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.
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 `
So glad I'm taking his class!
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
Very useful ,How to hide the side navigation in login page . thank you
Can you please make a video for achiev this with bootstrap.
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.
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?
You can also use mode over
Thank you for the tutorial
Great stuff mate you never fail to deliver :)
this is best video thank you keep rocking i'm waiting for more video like this
I love your classes!!!
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?
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!
Hi, I followed the cli to generate the files but there is no snippets for fully nav. Only a navigation works!
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'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?
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!
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?
How to set the Navigation header in the center of Navigation bar?
I put slidenav main for lg,and md..but i need on mob point to be on top..explain ?..
How would we be able to show the hamburger option always on a full screen?
That was great! Thank you.
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 }"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
My toolbar in the left sidenav looks different, it doesnt have the primary color but gets a different style because its in the sidenav. :-(
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
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],...
Does anyone know how to stop the sidenav from flickering on/off when you change the window size?
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.
I'm yet to watch....but thumbs up mate!
Thank you for your awesome support Oluwasegun!
great video, great teacher ! thanks
And what a great comment, thank you very very much :)
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.
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.
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
excellent, do you recommend using PrimeNG components?
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, how to change breakpoint, when to show hamburger? Thanks
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 presentation... do you have a transcript?
Thank you Dennis, I don't have a transcript though, sorry.
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
How can I integrate angular routing with this navigation in place ?
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 :/
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?
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
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?
Do you have an example where the user may resize the side bar?
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
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.
Hi, nice video, may I ask how to fix the toolbar at the top?
use inside tag
Anyone found out how to change the breakpoint? Ps. I love your content Maximilian
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.
how do you remove the navigation links when you make the screen smaller?
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
How we can get responsive mat-form-field inside a toolbar ?
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
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!
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!
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
I have a problem, the menu icon doesn"t show up on my page
Great course!
Thanks.
yes, this solution is very impressive
but I have one question how to apply on tablet screen responsive?
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??
bit outdated but still a great presentation to learn in great details
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 😊
Very well explained. Thank you for sharing my friend...
Happy to read that you liked it Shy, thank you!
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
If i need make the sidenav vertical, how could i do it?
please explain how to retrieve json data into this datatable
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
What about ngx-bootstrap navigation? Is it better to use or no?
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.
Please please do a video on angular material responsive flexlayout
Nice tutorial again. Thank you
Happy to read that Martin, thanks a lot!
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
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!
ok! but there is any way to handle on click close sidenave on mobile device if any link is clicked?
Hello Max,
I'm struggling to run the command "ng generate @angular/material:material-nav --name-main-nav" , it is throwing "Error: Schematic "@angular/material-nav" not found in collection "@schematics/angular".
I have seen the previous video for Angular material setup and done the set up.
Package.json file has '"@angular/material": "^6.3.0",' dependency in that, can you please help me out to fix this?
Anyone can help me out?
You missed component after ng
@@vadapallichaitu8799 No...
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
ng generate @angular/material:material-nav --name=main-nav
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 😅
Max please address many errors faced after updating to angularIvy
how to change color of side nav
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???
any hint how i can make a dropdown list in main navbar ?!
How can i make it horizontal?
This was so useful thank you
Thank YOU for your comment :)
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