Resizing text inputs with the CDK TextField API

Text inputs are an essential part of our everyday computer usage. Be it filling a form, searching some content on Google, or finding your favorite YouTube video, we all interact with text inputs, and when we have to write a bunch of content into a single text input, it really is necessary to have a good UX. In this recipe, you'll learn how to automatically resize the <textarea> inputs based on the input value, using the CDK TextField API.

Getting ready

The project for this recipe resides in chapter09/start_here/resizable-text-inputs-using-cdk. Proceed as follows:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab, and you should be able to see the app. Try typing a long text, and you'll see the text area displaying as follows:

Figure 9.16...