Angular CDK: Auto-resizing textareas!

Published: 28 June 2024
on channel: Brian Treese
573
29

By default, an HTML textarea control doesn’t expand or contract as content is added and removed. Sometimes this is ok, but often it would be better if we did have some control where we could allow the height to resize automatically, to better fit the content. We’ll this is possible and, in fact, it’s really easy to do in Angular when using the CDK. In this video I’ll show you just how easy it is. Alright, let’s get to it!

------------------------------------------------------------------------------

👕 Be the coolest developer in the room with these Angular tees! (https://www.teepublic.com/user/dev-drip)

------------------------------------------------------------------------------

🔗 Demo Links:
Before (https://stackblitz.com/edit/stackblit...)
After (https://stackblitz.com/edit/stackblit...)

------------------------------------------------------------------------------

📚 Additional Resources:
Angular CDK Textarea Autosize Documentation (https://material.angular.io/cdk/text-...)

------------------------------------------------------------------------------

📖 Chapters:
0:00 – Introduction
0:38 – The Demo Application
1:15 – Installing the Angular CDK
1:37 – How to Auto-Resize textareas in Angular Using the cdkTextareaAutosize Directive
3:25 – Include Angular CDK Auto-size Styles for Proper textarea Height Calculation
4:58 – Add Min and Max row Counts to Control Min and Max textarea Heights
6:07 – Conclusion

------------------------------------------------------------------------------

#angular #angulartutorial #cdk


Watch video Angular CDK: Auto-resizing textareas! online without registration, duration hours minute second in high quality. This video was added by user Brian Treese 28 June 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 57 once and liked it 2 people.