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

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.

[marcio]

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

[FirstnameLastname-wekg]

Something different than using angular material. Thanks👍👍

[techsoft]

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

[edfurtado]

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?

[ferrywijaya]

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.

[mejaay]

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

[edilsonfilho]

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

[nikitakumari]

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

[MrBoBrilO]

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

[sureshthalluru]

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

[xbesldu]

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

[Alexander-umvd]

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

[srafa]

The icons don't appear can someone help me?

[naiomi]

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

[SHEFAT-xqge]

my response in navbar is not working. need source code

[benmakhloufaya]

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

[basmaeladnany]

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

[ydct]

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?

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

[salonimalkani]

hey can you help me with one thing??plzzz