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
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.
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 😂
Nice tutorial, can you suggest how to make reusable component, I want in a way like same component i can use as a modal dialog, if user open from routing than display component, and in page i can inject component
Thanks! What kind of a component is this, a form component? It's usually not a good idea to use the same component in route + dialog. You can create a subcomponent which you can use in both places within the modal and/or the route.
You're welcome, Brian! As for the material docs, I find the API tab in each component to be the best resource to find out the nitty gritty of a specific component and all of the properties and events it supports. Often times when searching for some specific functionality I want, I end up finding it there. But if not, then I know that its not supported and I need to create it myself or something. As for learning, there is no greater experience than actually creating projects. So create a medium sized project with material and you'll learn along the way - at least that's my motto! :)
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?
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.
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!
I don't know how to learn angular and how to develop a project, and how to create a project architecture... although I works on angular but not getting clear picture and resources to learn
@@arunpanjiyar76 Well, don't get overwhelmed - we're all learning here. And Angular is also being updated quite a lot - so there's always something new to learn! So just pick a project you like and try doing it on your own. Bit by bit you'll get the hang of it - as long you build projects yourself. The official learning resource is angular.dev - the new docs site - so keep referencing to that when you get stuck. And of course various youtube channels like Josh Morony, Dymtro, RainerKamph - provide lots of up to date resources. Good luck :)
There is also a density option in Angular material 15. Because its material 2, we need to use a different function define the theme. See example on the docs: $my-theme: mat.define-light-theme(( color: ( primary: $my-primary, accent: $my-accent, ), density: 0, )); v15.material.angular.io/guide/theming#applying-a-theme-to-components
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!!!!!!!!!!!
The angular form is ugly, instead of using mat form field I usually use A div with custom input and styles.With your video I saw that it is easier to customize it now
Oh yeah, I was diplomatic in the video, so didn't use those exact words, but my sentiments are similar. You can very well use a custom input field and I do the same sometimes, but then you lose out on the well tested and accessiblity features of the material components. There is a lot that goes into creating custom components for production use - and since material does it well - it's great if we can just visually match it with our designs.
Thank you so much sir , it's really very very helpful.
Glad you found it helpful!
As usual. amazing content.. keep up the great work!
Thanks 🙏
Very nice, just what i needed. Keep up the good work!
Glad it helped!
Thank you so much for this tutorial. I tried this following your class
Great to know, how did it turn out?
Thank you so much, i struggled a lot for resizing the mat-form-field
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 :)
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
Thank you so much for giving this video... finally, u come up with this solution for this form field customization. Thanks a lot 🎉😊
Glad you found it helpful ☺️
always very nice information !!!
Glad you like it!
Nice Videos - very informative! Keep it up. Greetings from Germany.
Thanks 🙏 Glad you liked :)
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.
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 😂
Thanks for this video🤝
Welcome :)
Nice tutorial, can you suggest how to make reusable component, I want in a way like same component i can use as a modal dialog, if user open from routing than display component, and in page i can inject component
Thanks! What kind of a component is this, a form component? It's usually not a good idea to use the same component in route + dialog. You can create a subcomponent which you can use in both places within the modal and/or the route.
Always something good, from your oven.
Thanks Farhan, glad you liked it :)
Immense thanks for all the invaluable lessons.
Do you have any advise of how to study angular material and how to search or navigate the docs? 🙏
You're welcome, Brian! As for the material docs, I find the API tab in each component to be the best resource to find out the nitty gritty of a specific component and all of the properties and events it supports.
Often times when searching for some specific functionality I want, I end up finding it there. But if not, then I know that its not supported and I need to create it myself or something.
As for learning, there is no greater experience than actually creating projects. So create a medium sized project with material and you'll learn along the way - at least that's my motto! :)
@@ZoaibKhan thanks a lot for elaborating your workflow. I’d incorporate this… Remain blessed
how can we get form fields as responsive for all resolutions
Use this technique!
zoaibkhan.com/blog/create-a-responsive-card-grid-in-angular-with-css-2023/
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?
Good suggestion! I'll see what I can come up with :)
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.
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!
thanks, nice! :-)
Glad you liked it :)
Front engine is very tough for me, can you teach us, please 🙏
What do you find very tough specifically?
I don't know how to learn angular and how to develop a project, and how to create a project architecture... although I works on angular but not getting clear picture and resources to learn
@@arunpanjiyar76 Well, don't get overwhelmed - we're all learning here. And Angular is also being updated quite a lot - so there's always something new to learn!
So just pick a project you like and try doing it on your own. Bit by bit you'll get the hang of it - as long you build projects yourself.
The official learning resource is angular.dev - the new docs site - so keep referencing to that when you get stuck.
And of course various youtube channels like Josh Morony, Dymtro, RainerKamph - provide lots of up to date resources.
Good luck :)
How to achive the same in angular 15 or in angular 16
There is also a density option in Angular material 15. Because its material 2, we need to use a different function define the theme. See example on the docs:
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
),
density: 0,
));
v15.material.angular.io/guide/theming#applying-a-theme-to-components
@@ZoaibKhan thanx, could you pls make a short video to achive the same for angular 15 as you have done for material 3
Very insightfull 👍
are you planning to make a table material section?
Thank you
You mean in the dashboard template?
@@ZoaibKhan Yes correct
@@fahmihidayatullah478 Well, now that you mention it, yeah :)
@@ZoaibKhan Great! Thank you so much. God Bless To You. 🙏
@@fahmihidayatullah478 God Bless you too! :)
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!!!!!!!!!!!
Aah, that's a good suggestion! I've definitely had trouble myself when making the mat tables responsive. I'll work on it :)
Hi Sir, can create a course that covers all the topic of angular and project for response web application
I am working on an angular material course, will update as it progresses
The angular form is ugly, instead of using mat form field I usually use A div with custom input and styles.With your video I saw that it is easier to customize it now
Oh yeah, I was diplomatic in the video, so didn't use those exact words, but my sentiments are similar. You can very well use a custom input field and I do the same sometimes, but then you lose out on the well tested and accessiblity features of the material components. There is a lot that goes into creating custom components for production use - and since material does it well - it's great if we can just visually match it with our designs.