If you're looking for a textarea that grows and shrinks, check out this improved version:

https://codepen.io/benshope/pen/xOPvpm

angular.module('app').directive('expandingTextarea', function () {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs, $timeout) {
            $element.css('min-height', '0');
            $element.css('resize', 'none');
            $element.css('overflow-y', 'hidden');
            setHeight(0);
            $timeout(setHeightToScrollHeight);

            function setHeight(height) {
                $element.css('height', height + 'px');
                $element.css('max-height', height + 'px');
            }

            function setHeightToScrollHeight() {
                setHeight(0);
                var scrollHeight = angular.element($element)[0]
                  .scrollHeight;
                if (scrollHeight !== undefined) {
                    setHeight(scrollHeight);
                }
            }

            $scope.$watch(function () {
                return angular.element($element)[0].value;
            }, setHeightToScrollHeight);
        }
    };
});

This script will make all your textareas expand and contract as needed.

Hope this solution works well for you!

I discovered a more efficient method for achieving this task without relying on any external third-party libraries or directives.

$scope.adjustEditor = function() {
    var element = document.getElementById("page_content");
    element.style.height = element.scrollHeight + "px";
};

Simply include ng-keypress="adjustEditor()" in the textarea to accomplish the desired outcome.

<textarea ng-keypress="adjustEditor()" ng-model="bar"> </textarea>

This solution may prove beneficial to others encountering similar challenges in the future.

Update: Explore this codepen demonstration: http://codepen.io/kpourdeilami/pen/KDepk

Update 2: Follow the advice shared by @benshope

Update 3: For those utilizing Ionic/Angular 2, refer to the guidance provided by "Max Al Farakh"

If you're looking to automatically expand a textarea in Angular, check out Angular-Elastic. This directive is designed specifically for this purpose and can be easily installed using bower.

Simply run the command: bower install angular-elastic

After adding it to your project, you have the options to use it as an attribute:

<textarea msd-elastic ng-model="foo"> </textarea>

Or you can use it as a class:

<textarea class="msd-elastic" ng-model="bar"> </textarea>

If you're using Ionic 4.4 or newer, the autoGrow property is now built-in:

Check out the TextArea#Properties documentation for more details.

<ion-textarea auto-grow="true" rows="1"></ion-textarea>

Are you asking about making the text area grow vertically as you type? I experimented with this approach:

  <textarea ng-model='doc.description'
   rows='{{doc.description.length/50 + 1}}' 
   cols='50'></textarea>

It may seem a bit unconventional, but by estimating the expected length of the input text, we can dynamically adjust the number of rows in response to the content's length. This way, the text area expands vertically as I type, eliminating the need for scrolling or hiding any text out of view.

When utilizing ionic-5, take advantage of the auto-grow feature by setting it to true within your view. You can then utilize CSS to set min-height and max-height in order to control how the text grows.

ion-textarea {
min-height: 100px;
max-height: 200px;
}

If you encounter any strange behavior with the placeholder text after implementing the above fix, simply add the following code inside the ion-textarea:

::ng-deep textarea {
min-height: 100px;
}

Modifying benshope's solution slightly, I made adjustments to ensure that the textarea grows even when a user hits the carriage return key.

Instead of monitoring changes in the input value (which was not always triggered on carriage return), I switched to listening for the input event on the textarea itself.

(function () {
'use strict';

angular
        .module('app')
        .directive('expandingTextarea', expandingTextarea);

function expandingTextarea() {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs, $timeout) {
            $element.css('min-height', '0');
            $element.css('resize', 'none');
            $element.css('overflow-y', 'hidden');
            setHeight(0);
            $timeout(setHeightToScrollHeight);

            function setHeight(height) {
                $element.css('height', height + 'px');
                $element.css('max-height', height + 'px');
            }

            function setHeightToScrollHeight() {
                console.log('set height');
                setHeight(0);
                var scrollHeight = angular.element($element)[0]
                        .scrollHeight;
                if (scrollHeight !== undefined) {
                    setHeight(scrollHeight);
                }
            }

            angular.element($element)[0].addEventListener("input", setHeightToScrollHeight);
        }
    };
}})();

First step is to install the necessary package either by using bower with "bower install angular-elastic" or npm with "npm install angular-elastic;"

Next, you'll need to import the elastic.js file into your index.html like this:

<script src="js/elastic.js" type="text/javascript"></script>

Then, inject it into your angular module as shown below:

angular.module('yourApp', ['monospaced.elastic']);

After that, in your html file within the footer-bar section, include the following code:

<ion-footer-bar style="height: auto; overflow: visible !important">
  <textarea rows="1" msd-elastic ng-model="myMsg"></textarea>
</ion-footer-bar>