How to make your Angular apps responsive with CDK Layout and CSS?

#angular #responsivewebdesign #cdk
✨✨ Get the code for the theme builder app here:
buymeacoffee.com/zoaibkhan/e/...
🧪 Try out the Theme Builder app LIVE yourself:
material-theme-builder.zoaibk...
Blog post on Responsive CSS grid:
zoaibkhan.com/blog/create-a-r...
Learn how to make your Angular apps truly responsive for all screen sizes, from mobile to desktop. This video provides a step-by-step guide on optimizing the layout of an Angular Material theme builder app using a combination of CSS and Angular CDK Breakpoint Observer.
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Sections
00:00 Introduction to Responsive Angular Apps
00:11 Challenges with Current Layout
00:54 Overview of Responsive Strategies
01:52 Understanding Angular CDK Breakpoint Observer
04:48 Implementing Responsive Service
12:37 Creating Responsive Layouts with CSS
16:01 Conclusion and Additional Resources

[@DirtySouth33T]

i just bought the theme to learn more, thanks for making it available I am creating my own that has a public page and admin and app layout hopefully i can learn more from the one i just bought! I look forward to more videos. I also am getting used to the idea of having small components nested in the .ts files I always though it was a good idea :)

[@ZoaibKhan]

Sounds great! Let me know if you need any clarification in the code. When I started with single file components, it felt a bit odd as well. But with time I can see the benefits - it helps me keep the component size small and templates manageable!
Thanks for your comment :)

[@DirtySouth33T]

@@ZoaibKhan i am learning the smaller the component the easier tests are as well :)

[@andresmauriciofajardoolaya2721]

Awesome tips to make apps responsive with material cdk, thanks for this video 😀

[@ZoaibKhan]

Thanks Andres! Glad you found it helpful ☺️

[@ayushtamboli3496]

Your video is the best source for learning Angular in a professional, real-world office context. It's very important for me. Could you please create a playlist for Angular Layout Design using Angular Material? This could include an Admin Dashboard, ngCharts, SideBar, Toolbar, Login, Registration Forms, Tables, Dialogs, Animations, and a Complete Project Design. This would help us learn with complete projects.
Additionally, sometimes we face problems managing sessions when users are logged in. Could you cover what's safe and the right way to implement role-based login? It would be great if you could show how to display sidebars and content according to user roles after login.
If you create a complete professional project, we will learn the actual coding patterns used in companies because no other RUclipsr explains the latest technologies in Angular like you do. Please make a complete project for learning and real use.

[@ZoaibKhan]

Hey Ayush! Thanks for the detailed feedback :)
A course is in the pipeline related to Angular Material - where I'm planning to create a full fledged app using Angular Material - so that should cover that. But it'll be paid and probably on Udemy.
That's a good idea about role based login - I'll note it for the future videos.
For youtube, I plan to create a Modern Angular 18 Crash Course soon - which will be a complete CRUD app - but may not use material (maybe tailwindcss)

[@DirtySouth33T]

@@ZoaibKhan hi can you send us the link for the udemy course. I love the way you are doing your videos i am trying to get better wiht angular in general