Angular Menu: A Step-by-Step Tutorial

Welcome to our tutorial on Angular Menu: A Step-by-Step Tutorial! In this video, I'll show you how to create a custom Angular sidenav from scratch. You'll learn to write the markup for the Angular sidebar, integrate business logic using Angular signals to toggle or close the sidebar, and ensure it's fully responsive. Perfect for those looking to enhance their Angular responsive sidebar skills. Don't miss out on mastering your responsive sidenav in Angular!

MOST POPULAR COURSES

SERVICES THAT I'M USING

CONNECT WITH ME!

REFERENCES

TIMESTAMPS
0:00 Introduction
1:04 Project Structure
5:06 Rendering links
8:24 Rendering main
9:33 Business logic
14:16 Sidebar closing
15:22 Make it responsive
17:14 Updating main section
20:16 Providing initial state

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[fuzz]

Love your videos. I just finished my university project with thanks to your tutorials

[shahnawazk]

Nice, simple, precise! I am in love with angular again. Thanks & keep it coming.

[Rafał_Seifert]

This is always a great content when you build custom angular components! I have taken few of your paid courses. I would greatly appreciate an angular course with nx monorepo and new ngrx signal store for state management. I think that would be most up-to-date project course.

[marvelcontestofchampions]

In my opinion, you could centralize the logic within a service by using signals and observables, which would allow you to omit the use of input and output, keeping the components logic-free.

[jurybalikov]

I literally need to start refactoring my app to utilize sidebars on both sides tomorrow.

[muhammadfahadabid]

Quite informative
Please, Can you share the name of the theme you are using right now?

[rishikeshsarangi]

this video is a hidden tutorial on how to use signals :D

[sfspmusic]

Thanks for the tutorial! Is using using the hostListener a good solution for bigger websites, because it's like having a constant listener, and what are good alternatives to this approach?

[stevewitman]

Nice video, though correct me if I am wrong but I think from 15:50 to 16:15 should have been omitted from the video, right?

[vittalmhetre]

@MonsterlessonsAcademy when did you get on vs code?

[gabrieldavimonteiro]

When i put it in a real cellphone. When i click on the buttons(links) all the sidenav turn intoblue. Someone can help me with this problem?

[Amauriking]

I know you are working on latest angular release, but I would ask you if you can convert this project with old angular version using modules instead of standalone component. Thanks <3

[abrahamzachariah]

There is a channel called Angularistic. 😂