How to create Sleek Angular Material Forms?

#angular #material #formsoftware
✨ My Angular Shop: zoaibkhan.lemo...
📽️ My courses: zoaibkhan.com/...
✍️My blog for more free Angular posts: zoaibkhan.com/...
In this video, I guide you through transforming large Angular Material form fields into sleek, compact designs. Leverage Angular Material's theming APIs and configuration settings to globally adjust form fields, using density scaling for optimal compactness.
Socials:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Sections
00:00 Introduction and Overview
00:23 Understanding the Problem with Angular Material Form Fields
01:26 Project Setup and Initial Code Walkthrough
02:42 Implementing Global Style Changes
03:33 Adjusting Form Field Appearance and Spacing
05:30 Exploring Angular Material Theming APIs
06:12 Creating a Custom Theme
07:15 Applying Density to Components
08:00 Optimizing Component Density
08:34 Creating a Compact Theme
09:28 Applying Compact Theme to Form Fields
10:29 Final Thoughts and Demonstration
11:01 Conclusion and Next Steps

[@gayatriajith6448]

Thank you so much for this tutorial. I tried this following your class

[@techwake360]

Thank you so much, i struggled a lot for resizing the mat-form-field

[@ZoaibKhan]

Aah, me too, in the early days when no customization was available! There was a lot of overriding internal CSS styles - which messed everything up :)

[@gayatriajith6448]

Yes. I also struggled in version 14 and lower versions like 8. I could not find a way other than having some wrapper div css size adjustments. Thank you for this tutorial

[@jeffreybijl7577]

Very nice, just what i needed. Keep up the good work!

[@ZoaibKhan]

Glad it helped!

[@PK-vg9df]

Nice Videos - very informative! Keep it up. Greetings from Germany.

[@ZoaibKhan]

Thanks 🙏 Glad you liked :)

[@MichaelSmallDev]

Good stuff as always. Forms are definitely one of the most used things by me and I'm sure plenty of others, while also being a bit finicky. I didn't realize how flexible it was with density. As for why they are so big by default, I'm fairly sure it is for accessibility. I think that is why some of the old appearance types were deprecated for MDC, and why a lot of decisions about size and density are made.

[@ZoaibKhan]

Thanks Micheal! I'm not sure about accessibility being the reason for the sizes, because the fields still follow all the standards required for it. All I could gather was the touch targets to be big enough - but that's more of a concern for mobile screens. Still, it's a bit weird none of the other well used and established component frameworks don't have these large sizes. I think should ask chat gpt for the answer 😂

[@emilio_code]

Thanks for this video🤝

[@ZoaibKhan]

Welcome :)

[@MikelAingeru]

Good video ,there were some tricks that didn't know. Can you do another video about easily create and implement a custom angular material color palette (out of material default colors) for light and dark themes?

[@farhankhamran]

Always something good, from your oven.

[@ZoaibKhan]

Thanks Farhan, glad you liked it :)

[@fahmihidayatullah478]

Very insightfull 👍 are you planning to make a table material section? Thank you

[@ZoaibKhan]

You mean in the dashboard template?

[@fahmihidayatullah478]

@@ZoaibKhan Yes correct

[@ZoaibKhan]

@@fahmihidayatullah478 Well, now that you mention it, yeah :)

[@funatics6782]

I also have a problem with the Mat Table when I change the screen size on mobile. The data inside the Mat Table overflows, going outside the Mat Table. How can I make it flexible so that when the screen size gets smaller, the data stays inside the table? THANK YOUUUUUUUU ANGULAR MASTER!!!!!!!!!!!

[@franciscofdez8334]

Thank you for iluminating us on how to use the angular material library properly. I don't understand why Google does not focus on its own library in order to make developers use it.

[@ZoaibKhan]

The docs need to be better for sure! But we can all help out as well in tips and tricks. Hopefully the official guides get better. Thanks for the feedback!