Lesson Outline

Creating an Autogrow Directive for a Textarea

We've created a simple component, and now we are going to create a reasonably simple directive - this one is going to be a little more interesting. The previous example was a good example of how a component has its own template (which is what makes it a "component"), and this example should be a good demonstration of how a more generic directive is used to modify the behaviour of an existing component and does not provide its own template.

We will be creating a directive that we can attach to an <ion-textarea> that will cause it to automatically expand to fit the content that the user types into it - by default, the textarea height will remain static and at some point what the user's typing will be cut off.

When you use the <ion-textarea> component, the resulting output to the DOM looks like this:

<ion-textarea class="sc-ion-textarea-md-h sc-ion-textarea-md-s md hydrated">
  <div class="textarea-wrapper sc-ion-textarea-md">
    <textarea
      class="native-textarea sc-ion-textarea-md"
      autocapitalize="none"
      name="ion-textarea-0"
      placeholder=""
      spellcheck="false"
    ></textarea>
  </div>
</ion-textarea>

This creates an interesting issue, in that we can't apply attributes directly to the <textarea> element. For example, <textarea> accepts an attribute of autofocus to determine whether an input should be automatically focused when the page loads. But if we are using <ion-textarea> in our pages component, we would just have:

<ion-textarea></ion-textarea>