Animated Responsive Sidenav in Angular | Part 1 | Responsive Sidenav

In this video we'll create an animated responsive side navigation bar from scratch using angular.
_________________________________________________
Project helper:
github.com/Angular-istic/Proj...
_________________________________________________
Commands used
To generate components :
ng g c body --skip-tests true
ng g c sidenav --skip-tests true
ng g c dashboard --skip-tests true
ng g c products --skip-tests true
ng g c statistics --skip-tests true
ng g c coupens --skip-tests true
ng g c pages --skip-tests true
ng g c media --skip-tests true
ng g c settings --skip-tests true
_________________________________________________
If you think there's a better way to improve this code, please let us know in the comments.
If you like this video please subscribe to Angularistic, like and share this video.

[@marcio9161]

This was the most confuse angular tutorial that I've ever seen, but the result was amazing

[@bronwynpotgieter7405]

Looks super sleek! Thank you!

[@antoniolincolnmsjunior7636]

great layout bro!! thank you

[@leonelperez1943]

You are a genius! thanks!

[@FirstnameLastname-we6kg]

Something different than using angular material. Thanks👍👍

[@jacobokomo6077]

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.

[@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]

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.

[@H4LIL_G]

thats great :)

[@mejaay4077]

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

[@edilsonfilho5721]

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

[@sureshthalluru2012]

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

[@techsoft1578]

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

[@billchavez4874]

30 min solving this issue

[@nikitakumari5302]

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

[@lamyabenammar3050]

thanks a lot! I hope it works for me.

[@VinayTiwari-gn3ps]

Nice content

[@benmakhloufaya5037]

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

[@user-xb8es7ld9u]

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

[@MrBoBrilO]

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

[@shubhamtehare]

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

[@naiomi5532]

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

[@Alexander-um9vd]

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

[@Alexander-um9vd]

i just got it, thanks

[@pkyadav4628]

Angular material used or bootstrap

[@VinayTiwari-gn3ps]

Much better

[@janickspielmann2695]

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

[@SHEFAT-xq3ge]

my response in navbar is not working. need source code

[@srafa16]

The icons don't appear can someone help me?

[@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]

better to have component for each

[@BethellJack]

why? @@fabiobrizzi1738

[@AbdulSamad-rt2bj]

how to get other icons name

[@salonimalkani2934]

hey can you help me with one thing??plzzz

[@ydct1544]

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]

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

[@ydct1544]

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

@@ydct1544 okay no issues thanks fir replying

[@kishoret1411]

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

[@eclipsehunter]

@@kishoret1411 thanks brother

[@basmaeladnany6064]

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]

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

[@nurte4]

hi, can u share github repo

[@enriquemaestre2950]

Muchas gracias!! lo logré

[@ydct1544]

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

[@luiszelphmorenoruiz1845]

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

[@s.m.faizanraza1729]

source code link ?

[@juliofrancadasilva5504]

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]

same

[@youssefhasbi1]

@@saradhieb9640 same problem if you have solution show me

[@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]

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; }

[@ydct1544]

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

[@virokalu]

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

[@jhairdanielosoriogarzon9830]

Hi need Help

[@david_mosquera6207]

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

[@itsmhasnatawan]

Same happened with me

[@bavrzar8576]

What theme for vscode is used in the video?

[@angularistic]

Night Owl

[@bavrzar8576]

Thanks! 🥰@@angularistic

[@babatundeadenowo7568]

Almost broke my headphones out of frustration. bs.

[@jhonquistiano4531]

che culey no lo pasas

[@LarsRyeJeppesen]

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

[@ferrywijaya6404]

have any option for that sir?