AngularJS TextArea to Show Count of Number of Characters Left

Here I will explain how to use AngularJS to show number of characters remaining in textarea or AngularJS show remaining characters count in textarea with example or AngularJS count characters in textarea and set maxlength to textarea in AngularJS with example.

To show number of characters left in textarea we need to use ng-model property in AngularJS for that we need to write the code like as shown below,

<textarea ng-model="noofchars" ng-trim="false" cols="40" rows="7" maxlength="100"></textarea>
<span>{{100 - noofchars.length}} left</span>

If you want to check it in complete example you need to write the code like as shown below.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>AngularJS Show Number of Characters Left in TextArea</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
</head>

<body ng-app>
    <textarea ng-model="noofchars" ng-trim="false" cols="40" rows="7" maxlength="100"></textarea>
    <span>{{100 - noofchars.length}} left</span>
</body>

</html>

Conclusion

I hope you all enjoyed this article. AngularJS is next level single page web designing and client side coding.