How Angular Model Inputs helped me fix a weird bug in my app!

#angular #signals #input
✨ Get the theme builder app shown in the video here:
buymeacoffee.com/zoaibkhan/e/...
Or try it out LIVE: easy-material-theming.vercel....
❤️ If you liked the video, you can buy me a coffee here:
buymeacoffee.com/zoaibkhan
📽️ My courses:
zoaibkhan.com/courses
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
In this video, I'll discuss how we fixed a bug in one of my apps using the new Angular Model Inputs in v17.3 and also refactor my code using the same!
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Sections:
00:00 Introduction to Angular Model Inputs
00:29 The Issue with Side Nav
01:00 Diagnosing the Problem
01:12 Code Walkthrough
01:57 Implementing a Solution
04:28 Exploring Angular Model Inputs
06:41 Refactoring with Model Inputs
11:59 Alternative Solutions
12:37 Conclusion and Summary

[@ZoaibKhan]

I would love to hear your thoughts on model inputs! Have you ever used them in your apps or plan to? Let me know :)

[@codeblitz2354]

Keep it up bro nice content

[@ZoaibKhan]

Thanks man 🙏

[@MonaCodeLisa]

I have not encountered that problem because I always delete the default databinded state and I set it to opened="open" that is like the default thing I do first, and then the second default thing is to remove "example-" from all classes & rearrange CSS styles to SCSS 🙂 But I like your approach and cool video 👍

[@ZoaibKhan]

So you basically keep the state opened by default and then open and close using styles?

[@MonaCodeLisa]

@@ZoaibKhan the toggle still works, just it is initially open and clicking or tapping on mobile outside of the sidenav - does not close it, it is only controlled by the menu mat-icon

[@ZoaibKhan]

@@MonaCodeLisa aah, so you're using the "side" mode instead of the "over" mode. It works for me in that case as well. The issue comes up when for smaller screens I need to make it work in "over" mode with backdrop click enabled.

[@MonaCodeLisa]

@@ZoaibKhan I am still using both, I am using the mediaquery matches, so desktop is "side" and turns into "over" for mobile, I keep all that Angular Material provides for me :) and the only thing I remove is the data binding there to set it to open as default state when page loads