Angular Material Responsive Navigation Tutorial

Поделиться
HTML-код
  • Опубликовано: 9 ноя 2024

Комментарии • 266

  • @karlschmidt9738
    @karlschmidt9738 4 года назад +2

    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!

    • @neurlyai401
      @neurlyai401 2 года назад

      you know right. really a pain.

  • @jennisonb37
    @jennisonb37 Год назад

    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.

  • @farzanakabir4018
    @farzanakabir4018 5 лет назад +1

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

    • @academind
      @academind  5 лет назад +1

      It really brings a smile to my face if I read such comments, thank you very much Farzana!

  • @ebooki2911
    @ebooki2911 5 лет назад +13

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

    • @ebooki2911
      @ebooki2911 5 лет назад

      The way the topic is explained methodically is superb!

  • @mahmoudfawzy9901
    @mahmoudfawzy9901 5 лет назад +2

    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.

  • @allprowebdesigns917
    @allprowebdesigns917 2 года назад +1

    Great course on Angular material. Nice components and direction.

  • @dhammadeepdevke2334
    @dhammadeepdevke2334 4 года назад +1

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

  • @BigGingerJake
    @BigGingerJake 4 года назад

    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.

    • @BigGingerJake
      @BigGingerJake 4 года назад

      Version 9 of @angular/material is almost released, and they will change the schematics, and thus the command to `ng generate @angular/material:navigation `

  • @raffaellafico7652
    @raffaellafico7652 6 лет назад +8

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

    • @academind
      @academind  6 лет назад

      Thanks so much for your fantastic feedback Raffaella, this honestly means a lot to us :)

  • @snooter28
    @snooter28 4 года назад

    Even in 2020 this helped me tremendously. Thank you!

    • @academind
      @academind  4 года назад

      Happy to read that, thank you for your comment!

    • @natetolbert3671
      @natetolbert3671 4 года назад +1

      Did you have a problem when trying to auto generate? I am getting an error saying that it cant find a package.json

    • @ahmedalmazrooei2365
      @ahmedalmazrooei2365 4 года назад +1

      @@natetolbert3671 you have to install Angular Material
      ng add @angular/material

  • @magicorpse
    @magicorpse 5 лет назад

    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.

  • @timures
    @timures 2 года назад

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

  • @hocviet6138
    @hocviet6138 5 лет назад +8

    Thank you for this.
    My online teacher.

  • @charlesperry9598
    @charlesperry9598 5 лет назад +3

    So glad I'm taking his class!

  • @davidmander8226
    @davidmander8226 4 года назад

    Great stuff mate you never fail to deliver :)

  • @gahyunlee4324
    @gahyunlee4324 3 года назад

    I love your classes!!!

  • @gustavvingtoft2362
    @gustavvingtoft2362 5 лет назад +1

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

  • @davoodsoleimani9482
    @davoodsoleimani9482 8 месяцев назад

    That was great! Thank you.

  • @codemylife9121
    @codemylife9121 6 лет назад

    Dude... That is Fantastic...
    Thank you very much for this short and sweet explanation!

    • @academind
      @academind  6 лет назад +1

      Thank YOU - I'm very happy to hear you enjoyed this video!

  • @soliiiiiso
    @soliiiiiso 6 лет назад

    Wonderful !!!!!!!!!!! Thanks Man .. you are really a great TEACHER

    • @academind
      @academind  6 лет назад

      What more can I say but thank YOU Obed for your wonderful feedback, so happy to read that :)

  • @ernstvisser7279
    @ernstvisser7279 6 лет назад +3

    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.

  • @aoam9194
    @aoam9194 3 года назад

    You can also use mode over
    Thank you for the tutorial

  • @sdmdurai257
    @sdmdurai257 3 года назад

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

  • @imthiyazg
    @imthiyazg 3 года назад

    Very useful ,How to hide the side navigation in login page . thank you

  • @SophieDubbeldam
    @SophieDubbeldam 6 лет назад +8

    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?

    • @omarhegazi1613
      @omarhegazi1613 6 лет назад

      same here

    • @apprendrelefrancais5355
      @apprendrelefrancais5355 6 лет назад +10

      npm install --save @angular/material @angular/cdk
      npm install --save @angular/animations
      ng generate @angular/material:material-nav --name=main-nav

    • @tomcatbuzz
      @tomcatbuzz 6 лет назад

      @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.

    • @dirkdupont5004
      @dirkdupont5004 6 лет назад

      You probably forgot the before the

    • @sebastianpoczesny3151
      @sebastianpoczesny3151 6 лет назад

      Dictionnaire It did not work

  • @dennisvarni1494
    @dennisvarni1494 5 лет назад

    Great presentation... do you have a transcript?

    • @academind
      @academind  5 лет назад

      Thank you Dennis, I don't have a transcript though, sorry.

  • @MarMansillaGon
    @MarMansillaGon 4 года назад

    You have my like. Awesome material of material hehe.

  • @alinaraya2080
    @alinaraya2080 6 лет назад +2

    Hi Max, How do u hide the main nav links that you show in desktop view when hamburger sign appears.

  • @tsuyoshi4226
    @tsuyoshi4226 5 лет назад

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

    • @academind
      @academind  5 лет назад

      Thanks so much, this really means a lot to me :)

    • @yugiohfan2022
      @yugiohfan2022 5 лет назад

      danke das es krüppeln gibt wäre ich gar nich hier bei denn krüppeln alter hahahahahahahahahahahahahahahahahahaha

  • @saadzafar4336
    @saadzafar4336 6 лет назад

    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 😊

    • @academind
      @academind  6 лет назад

      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

    • @saadzafar4336
      @saadzafar4336 6 лет назад

      Academind Thank you for your respone. Your reply has been really helpful. Keep making awesome tutorials and stay blessed 😊

  • @lpwp2110
    @lpwp2110 5 лет назад

    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?

  • @enkh-uliraldechin7071
    @enkh-uliraldechin7071 5 лет назад

    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!

  • @dileepkeeppalli1147
    @dileepkeeppalli1147 6 лет назад +1

    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?

  • @franciscofdez8334
    @franciscofdez8334 6 лет назад +1

    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 ^_^

  • @daniellaerachannel
    @daniellaerachannel 6 лет назад +2

    great video, great teacher ! thanks

    • @academind
      @academind  6 лет назад

      And what a great comment, thank you very very much :)

  • @debiprasadpanda619
    @debiprasadpanda619 4 года назад

    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.

  • @byzadev
    @byzadev 6 лет назад

    Awesome! Perfect for me in this moment.

    • @academind
      @academind  6 лет назад

      Great to hear, thank you so much!

  • @martinschutz3721
    @martinschutz3721 5 лет назад

    Nice tutorial again. Thank you

    • @academind
      @academind  5 лет назад

      Happy to read that Martin, thanks a lot!

  • @aram5642
    @aram5642 5 лет назад

    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.

  • @fidra19
    @fidra19 6 лет назад

    Tnx a lot man, You just saved me a lot of time!

    • @academind
      @academind  6 лет назад +1

      That's just great to read Filip, thanks a lot for sharing this!

  • @anasshawesh3425
    @anasshawesh3425 6 лет назад

    excellent, do you recommend using PrimeNG components?

  • @rahulvanmali1406
    @rahulvanmali1406 6 лет назад +1

    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

  • @RelAxGamingKing77
    @RelAxGamingKing77 3 года назад

    Thank you so much. You are awesome!

  • @praveenpatel9972
    @praveenpatel9972 5 лет назад +1

    Can you please make a video for achiev this with bootstrap.

  • @gabrielblpapera
    @gabrielblpapera 5 лет назад

    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 :/

  • @elyu_vibes
    @elyu_vibes 5 лет назад

    Hi, I followed the cli to generate the files but there is no snippets for fully nav. Only a navigation works!

  • @bhaidar
    @bhaidar 6 лет назад +1

    Hey Max, what's the difference between using "!" and "?" to cater for null values? Thanks

    • @tovawr
      @tovawr Год назад

      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

  • @armandoarteaga1329
    @armandoarteaga1329 5 лет назад

    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?

    • @amanidaou655
      @amanidaou655 5 лет назад

      you should write its path in the project

  • @sarandasadiku4435
    @sarandasadiku4435 4 года назад

    Anyone found out how to change the breakpoint? Ps. I love your content Maximilian

  • @leonieschalkwyk2176
    @leonieschalkwyk2176 6 лет назад +3

    Hi Max. I have tried this [ngClass]="{hidden: !(isHandset$ | async)!.matches}" but it does not work

    • @taivon
      @taivon 6 лет назад +6

      [ngClass]="{hidden : !(isHandset$ | async)}" works using angular 6.1.9

    • @pebito
      @pebito 6 лет назад +2

      Works for me too in Angular 7. I dont really get this .matches thing.

    • @Acko077
      @Acko077 6 лет назад +2

      @@taivon life saver

  • @pierrebiojoux4848
    @pierrebiojoux4848 6 лет назад

    Thank you for the video very nice !
    Btw I would like to know which theme do you use for visual code ? thanks

    • @academind
      @academind  6 лет назад +1

      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

  • @MrSolumbe
    @MrSolumbe 6 лет назад +4

    I'm yet to watch....but thumbs up mate!

    • @academind
      @academind  6 лет назад

      Thank you for your awesome support Oluwasegun!

  • @EclairPerversePastry
    @EclairPerversePastry 6 лет назад

    This was so useful thank you

    • @academind
      @academind  6 лет назад +1

      Thank YOU for your comment :)

  • @JA1810HV
    @JA1810HV 6 лет назад

    Awesome! Please create a serie of videos of React Native with Native base or Material UI for React

    • @academind
      @academind  6 лет назад +1

      Thanks for the great feedback + the suggestion! :)

  • @morpheuzmatrix
    @morpheuzmatrix 5 лет назад +1

    Great course!
    Thanks.

  • @shyagam
    @shyagam 5 лет назад

    Very well explained. Thank you for sharing my friend...

    • @academind
      @academind  5 лет назад

      Happy to read that you liked it Shy, thank you!

  • @singtoli4200
    @singtoli4200 6 лет назад

    Hi, nice video, may I ask how to fix the toolbar at the top?

  • @gautamnath7458
    @gautamnath7458 4 года назад

    bit outdated but still a great presentation to learn in great details

  • @extrasplays1744
    @extrasplays1744 4 года назад +1

    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.

    • @rayatulislam5370
      @rayatulislam5370 4 года назад

      hi, I am also facing the same problem, did you find any solution? thanks

    • @ChadE1020
      @ChadE1020 4 года назад

      npm install --save @angular/material @angular/cdk
      npm install --save @angular/animations
      ng generate @angular/material:material-nav --name=main-nav

  • @flyviral
    @flyviral Год назад

    best explanation

  • @boiyedove
    @boiyedove 6 лет назад

    Please specify the version of angularjs and angular material used in this training in the video description

    • @academind
      @academind  6 лет назад

      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

  • @archanakurup6158
    @archanakurup6158 4 года назад

    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?

  • @sureshkumar-ts1qu
    @sureshkumar-ts1qu 5 лет назад

    Please please do a video on angular material responsive flexlayout

  • @alexandrospappas1869
    @alexandrospappas1869 6 лет назад

    Do you have an example where the user may resize the side bar?

  • @sanju8130
    @sanju8130 5 лет назад

    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

  • @ayoubalikkane8527
    @ayoubalikkane8527 6 лет назад +1

    Good Job Maximillian

    • @academind
      @academind  6 лет назад

      Thank you for your great feedback Ayoub!

  • @avolamedia
    @avolamedia 3 года назад

    Thank you it is help full

  • @DividedStates
    @DividedStates 5 лет назад +2

    8:45 how would you find out which breakpoint was used in material and modify it?

    • @sarandasadiku4435
      @sarandasadiku4435 4 года назад

      I am also interested changing the breakpoint, did you find out how?

  • @rohitpalav1133
    @rohitpalav1133 4 года назад

    yes, this solution is very impressive
    but I have one question how to apply on tablet screen responsive?

  • @luiseduardofarfanmelgar2340
    @luiseduardofarfanmelgar2340 6 лет назад

    Great video! awesome! many thanks!

    • @academind
      @academind  6 лет назад

      YOU are awesome Luis, thank you for your support!

  • @BlackEyedPeas0078
    @BlackEyedPeas0078 6 лет назад

    Thank you for your contributions for us, I hope you can create a project with Angular Material

    • @academind
      @academind  6 лет назад +2

      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

  • @GUTIECUADOR
    @GUTIECUADOR 6 лет назад

    Excelent video but i have a issue; How i can to make a little padding in the ng-content?

    • @GUTIECUADOR
      @GUTIECUADOR 6 лет назад

      LUL i solved XD. with a div and add a class; put the ng-content into the div

  • @Elregar71
    @Elregar71 6 лет назад

    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.

  • @peterl8723
    @peterl8723 6 лет назад

    Thank you so much. This is great

    • @academind
      @academind  6 лет назад

      So cool to read that Peter, thank you very much for your comment!

  • @The0posthuma
    @The0posthuma 4 года назад

    how do you remove the navigation links when you make the screen smaller?

  • @ruslanpascoal9247
    @ruslanpascoal9247 5 лет назад

    So helpful!

  • @TropicalTaquito
    @TropicalTaquito 6 лет назад

    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 😅

  • @shahabuddinahmed7720
    @shahabuddinahmed7720 6 лет назад

    Thanks You so much for such that tutorials

    • @academind
      @academind  6 лет назад

      Thanks so much for your comment, happy to read that you like the video!

  • @chrisniznik4056
    @chrisniznik4056 4 года назад

    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.

  • @АлександрТитов-щ5с

    What about ngx-bootstrap navigation? Is it better to use or no?

  • @alexanderplavnik3186
    @alexanderplavnik3186 5 лет назад

    Hey, how to change breakpoint, when to show hamburger? Thanks

  • @avashbhaju3246
    @avashbhaju3246 3 года назад

    How would we be able to show the hamburger option always on a full screen?

  • @archanakurup6158
    @archanakurup6158 4 года назад

    How to set the Navigation header in the center of Navigation bar?

  • @avanishmylari6217
    @avanishmylari6217 6 лет назад

    please explain how to retrieve json data into this datatable

  • @tanzeelrana7348
    @tanzeelrana7348 3 года назад

    How can I integrate angular routing with this navigation in place ?

  • @vadapallichaitu8799
    @vadapallichaitu8799 4 года назад

    Max please address many errors faced after updating to angularIvy

  • @ayoubalikkane8527
    @ayoubalikkane8527 6 лет назад

    How we can get responsive mat-form-field inside a toolbar ?

  • @shpendsermaxhaj7062
    @shpendsermaxhaj7062 5 лет назад

    Mine appears as text with no design whatsoever, is this the update of Angular or am I missing something?
    Thank you either way :)

  • @kiambojyms2196
    @kiambojyms2196 6 лет назад

    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.

  • @Smidgon
    @Smidgon 5 лет назад +2

    this just doesnt work for me ive spent hours trying and nothing works it just shows a blank screen

    • @balduran
      @balduran 4 года назад +1

      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.

  • @adobai
    @adobai 5 лет назад

    I love your courses, but could you please use a different platform? I struggle to get Udemy to take my money.

    • @academind
      @academind  5 лет назад

      Sorry to read that you're unhappy with Udemy, we're very happy with it to be honest.

    • @adobai
      @adobai 5 лет назад

      @@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.

  • @yuehernkang
    @yuehernkang 6 лет назад

    thank you ! Great video

    • @academind
      @academind  6 лет назад +1

      Thank YOU for your comment Yue!

  • @Shakilahmed-uk8hh
    @Shakilahmed-uk8hh 6 лет назад

    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???

  • @krishnar9932
    @krishnar9932 5 лет назад

    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.

  • @juliangomez527
    @juliangomez527 5 лет назад

    If i need make the sidenav vertical, how could i do it?

  • @WebTechies82
    @WebTechies82 5 лет назад

    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

    • @harv8403
      @harv8403 4 года назад

      Me pasa lo mismo encontraste solucion??

  • @Iamshivpandey
    @Iamshivpandey 5 лет назад

    ok! but there is any way to handle on click close sidenave on mobile device if any link is clicked?

  • @hasanhaskic4680
    @hasanhaskic4680 2 года назад

    I put slidenav main for lg,and md..but i need on mob point to be on top..explain ?..

  • @adebimpeomolaso
    @adebimpeomolaso 6 лет назад

    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?

  • @highjumpdev3692
    @highjumpdev3692 5 лет назад

    I am confused, about the idea of rest of the content between this ???

    • @natetolbert3671
      @natetolbert3671 4 года назад

      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).