Angular Material Responsive Navigation Tutorial

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!

----------

----------

• And you should of course also follow @academind_real.

See you in the videos!

----------

[karlschmidt]

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!

[farzanakabir]

I just love this guy... His coding style and teaching style just awesome..

[jennisonb]

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.

[ebooki]

One of the best tutorials i have seen on Front End.

[dhammadeepdevke]

Thanks a ton...I was wasting my time on google to create this nav ....finallly got on youtube :)

[allprowebdesigns]

Great course on Angular material. Nice components and direction.

[raffaellafico]

Excellent.
Many thanks Maximillian and Academind team!
Muchas gracias!!!

[mahmoudfawzy]

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.

[hocviet]

Thank you for this.
My online teacher.

[snooter]

Even in 2020 this helped me tremendously. Thank you!

[timures]

Hi. thank u, very very much. this video help me understand how to make responsive navigation on angular

[gustavvingtoft]

Max, you are a ridiculous good teacher. Thank you for all your work. I love your udemy courses.

[codemylife]

Dude... That is Fantastic...

Thank you very much for this short and sweet explanation!

<3 Academind

[sdmdurai]

this is best video thank you keep rocking i'm waiting for more video like this

[davidmander]

Great stuff mate you never fail to deliver :)

[soliiiiiso]

Wonderful Thanks Man .. you are really a great TEACHER

[BigGingerJake]

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 <path/component-name>`

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 <some name> *is wrong*.

Hope that helps.

[ernstvisser]

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.

[tsuyoshi]

Thank you for the great learning video. You are the best!

[MarMansillaGon]

You have my like. Awesome material of material hehe.