Animated Responsive Sidenav in Angular | Part 1 | Responsive Sidenav

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 พ.ย. 2024

ความคิดเห็น • 81

  • @techsoft1578
    @techsoft1578 ปีที่แล้ว +11

    For people facing issue with the nav bar not being expanding just set the .sidenav class width to 5rem :) hope it helps

    • @billchavez4874
      @billchavez4874 6 หลายเดือนก่อน

      30 min solving this issue

  • @FirstnameLastname-we6kg
    @FirstnameLastname-we6kg ปีที่แล้ว +2

    Something different than using angular material. Thanks👍👍

    • @jacobokomo6077
      @jacobokomo6077 ปีที่แล้ว +5

      Thanks a lot. A this is what i like the most about this build. No Material, just plain SCSS!
      Could you explain, I would love it more when you speak and explain a bit.

  • @sureshthalluru2012
    @sureshthalluru2012 7 หลายเดือนก่อน

    Hey Angularistic team,
    Can you tell me, which versions of Angularjs, Nodejs, typescript, rxjs is used here in this application.
    It will be helpful for us.
    Thanks.
    Suresh

  • @LatinosHablandoInglés
    @LatinosHablandoInglés ปีที่แล้ว +3

    Hello, when clicking on the first button to expand the menu, the body element does not move to the right.
    ngOnInit(): void {
    this.screenWidth = window.innerWidth;
    }
    I have reviewed all the code and it is the same as yours, it is the only thing I am missing. Can you help me? I'm using Angular 16.0.2. Will it be because of the Angular version?

    • @salonimalkani2934
      @salonimalkani2934 ปีที่แล้ว

      same problem with me...did you got the solution??please let me know

    • @LatinosHablandoInglés
      @LatinosHablandoInglés ปีที่แล้ว

      @@salonimalkani2934 No, I haven't been able to fix the problem yet. I think it has to do with the variable this.screenWidth which, even though it changes its value, this value doesn't get passed to body.component, as if the interface between components is failing in some way.

    • @salonimalkani2934
      @salonimalkani2934 ปีที่แล้ว

      @@LatinosHablandoInglés okay no issues thanks fir replying

    • @kishoret1411
      @kishoret1411 ปีที่แล้ว +8

      Make sure in app.component.html @18.30 the code should be inside the closing tag of .

    • @eclipsehunter22
      @eclipsehunter22 ปีที่แล้ว

      @@kishoret1411 thanks brother

  • @basmaeladnany6064
    @basmaeladnany6064 ปีที่แล้ว +1

    For the people who click on the sidenav and the body content doesnt go to the right ( the sidenav hides the content) just do like the video and try emptying the browser's cache, for me it worked on private navigation, but didn't work on normal until i cleared it. hope it helps

    • @aymenwedherfi881
      @aymenwedherfi881 7 หลายเดือนก่อน

      i'm having same problem and can't fix it

  • @bronwynpotgieter7405
    @bronwynpotgieter7405 ปีที่แล้ว +4

    Looks super sleek! Thank you!

  • @edfurtado6637
    @edfurtado6637 ปีที่แล้ว

    very good, amazing, my friend, I want to use bootstrap in the project and modal componet, but when installing and using the compoment it doesn't cover all screens, refactoring the code, it's due to the fixed position of the sidenav menu, if you change this attribute it breaks the structure, how do I solve it?

  • @ferrywijaya6404
    @ferrywijaya6404 11 หลายเดือนก่อน

    Hello sir thanks for sharing this tutorial.
    i got some problem sir, when i resize the form, the navbar cannot automatically display like above video example. the text keep in selected styleClass and only change if i click refresh browser button.

  • @MuhammadSaeed-x7x
    @MuhammadSaeed-x7x ปีที่แล้ว +1

    Everything is working good. Except that on click on the component, the icon is barely visible and the size is small as compared to in the video.
    The styling is same no error but still getting this.
    Anyone faces this??

  • @AAA1649
    @AAA1649 2 หลายเดือนก่อน

    thank you, it very cool for me, i like slide animation

  • @edilsonfilho5721
    @edilsonfilho5721 10 หลายเดือนก่อน

    When I do click on button "A" to expand, the button reduce own size for a moment, then back to the normal size

  • @ViniDev21
    @ViniDev21 2 หลายเดือนก่อน

    Good morning! Are you using 'standalone' in this project?

  • @nikitakumari5302
    @nikitakumari5302 ปีที่แล้ว

    Hey I dont, know why but when I open dashboard sidenav bar disappears.

  • @mejaay4077
    @mejaay4077 ปีที่แล้ว

    Are there any way to convert sidenav bar into header bar when resize the screen?

  • @Alexander-um9vd
    @Alexander-um9vd ปีที่แล้ว

    hey bro , great job !! a question , How can I make the navigation bar allow opening links from external pages?

  • @janickspielmann2695
    @janickspielmann2695 11 หลายเดือนก่อน

    Is there no sound, or is it my pc? There does not have to be sound, but just wandering.

  • @MrBoBrilO
    @MrBoBrilO ปีที่แล้ว

    Can you enable routing for these somehow so data on different tabs is loaded dynamically when adding/editing/deleting (from the database)?

    • @shubhamtehare
      @shubhamtehare ปีที่แล้ว

      yes i added crud table for sidenav links which will add edit delete export data by using spring boot backend

  • @benmakhloufaya5037
    @benmakhloufaya5037 7 หลายเดือนก่อน

    Can we use this with CSS? Because I use CSS, not SCSS

  • @w3fordummies
    @w3fordummies ปีที่แล้ว +1

    My page doesn't move the element to the left when I click, is there a css problem? I'm using ngOnInit and it's not working

    • @saradhieb9640
      @saradhieb9640 ปีที่แล้ว

      same

    • @youssefhasbi1
      @youssefhasbi1 ปีที่แล้ว

      @@saradhieb9640 same problem if you have solution show me

    • @saradhieb9640
      @saradhieb9640 ปีที่แล้ว

      @@youssefhasbi1 yes you just need to update the width of .sidenav element and reduce it ( try different width until you get the width you want )

    • @danielgoful
      @danielgoful ปีที่แล้ว

      I speak Spanish, but a few weeks ago I went through the same thing, I think my solution was this
      getBodyClass(): string {
      let classStyle = '';
      if(this.collapsed && this.screenWidth > 768)
      {
      styleClass = 'trimmed-body';
      }
      else if(this.collapsed && this.screenWidth 0)
      {
      styleClass = 'body-md-screen';
      }
      return style class;
      }

    • @LatinosHablandoInglés
      @LatinosHablandoInglés ปีที่แล้ว

      @@danielgoful Hola, pero no entiendo cual fue tu solución, me ayudas?

  • @naiomi5532
    @naiomi5532 6 หลายเดือนก่อน

    hello i wanna ask it'is possible to update to angular 17 ?

  • @Animesh878
    @Animesh878 3 หลายเดือนก่อน

    where did u get screen width

  • @pkyadav4628
    @pkyadav4628 ปีที่แล้ว

    Angular material used or bootstrap

  • @antoniolincolnmsjunior7636
    @antoniolincolnmsjunior7636 ปีที่แล้ว

    great layout bro!! thank you

  • @heitkrr
    @heitkrr ปีที่แล้ว

    is it normal to a component to every button like you did? or its better to create just one and use it for every sidebar button?

    • @fabiobrizzi1738
      @fabiobrizzi1738 ปีที่แล้ว

      better to have component for each

    • @BethellJack
      @BethellJack 11 หลายเดือนก่อน

      why?
      @@fabiobrizzi1738

  • @SHEFAT-xq3ge
    @SHEFAT-xq3ge 11 หลายเดือนก่อน

    my response in navbar is not working. need source code

  • @lamyabenammar3050
    @lamyabenammar3050 ปีที่แล้ว

    thanks a lot! I hope it works for me.

  • @leonelperez1943
    @leonelperez1943 ปีที่แล้ว

    You are a genius! thanks!

  • @virokalu
    @virokalu 10 หลายเดือนก่อน

    Guys, Use Angular version 16 or lower to work with this tutorial smoothly.

  • @srafa16
    @srafa16 10 หลายเดือนก่อน

    The icons don't appear can someone help me?

  • @AbdulSamad-rt2bj
    @AbdulSamad-rt2bj 6 หลายเดือนก่อน

    how to get other icons name

  • @bavrzar8576
    @bavrzar8576 ปีที่แล้ว

    What theme for vscode is used in the video?

  • @david_mosquera6207
    @david_mosquera6207 ปีที่แล้ว

    Someone got the error with OnInit, the dashboard does not run for me when the sidenav is opened

  • @salonimalkani2934
    @salonimalkani2934 ปีที่แล้ว

    hey can you help me with one thing??plzzz

  • @babatundeadenowo7568
    @babatundeadenowo7568 ปีที่แล้ว +1

    Almost broke my headphones out of frustration. bs.

  • @nurte4
    @nurte4 6 หลายเดือนก่อน

    hi, can u share github repo

  • @CarolVianaxx
    @CarolVianaxx 3 หลายเดือนก่อน

    thank you!

  • @H4LIL_G
    @H4LIL_G 5 หลายเดือนก่อน

    thats great :)

  • @VinayTiwari-gn3ps
    @VinayTiwari-gn3ps ปีที่แล้ว

    Nice content

  • @elliotalderson1604
    @elliotalderson1604 3 หลายเดือนก่อน

    left the full code please

  • @enriquemaestre2950
    @enriquemaestre2950 ปีที่แล้ว

    Muchas gracias!! lo logré

    • @LatinosHablandoInglés
      @LatinosHablandoInglés ปีที่แล้ว

      Felicitaciones, amigo, cuando haces clic en el botón principal empuja a la derecha el contenido principal?, te funciona esa parte?

    • @luiszelphmorenoruiz1845
      @luiszelphmorenoruiz1845 6 หลายเดือนก่อน

      Amigo, que version de Angular estas usando, a mi no me esta funcionando lo del router-outlet en body

  • @VinayTiwari-gn3ps
    @VinayTiwari-gn3ps ปีที่แล้ว

    Much better

  • @s.m.faizanraza1729
    @s.m.faizanraza1729 ปีที่แล้ว

    source code link ?

  • @jhairdanielosoriogarzon9830
    @jhairdanielosoriogarzon9830 ปีที่แล้ว

    Hi need Help

  • @jhonquistiano4531
    @jhonquistiano4531 ปีที่แล้ว

    che culey no lo pasas

  • @LarsRyeJeppesen
    @LarsRyeJeppesen ปีที่แล้ว

    In body component: getBodyClass() is being call ayyyyyyyyyyy lot of times, it will really be nasty for performance.

    • @ferrywijaya6404
      @ferrywijaya6404 11 หลายเดือนก่อน

      have any option for that sir?