Post
Ask Question

AngularJS TextArea to Show Count of Number of Characters Left

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,

  1. <textarea ng-model="noofchars" ng-trim="false" cols="40" rows="7" maxlength="100"></textarea>   
  2. <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.
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2.   
  3. <head>  
  4.     <title>AngularJS Show Number of Characters Left in TextArea</title>  
  5.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>  
  6. </head>  
  7.   
  8. <body ng-app>  
  9.     <textarea ng-model="noofchars" ng-trim="false" cols="40" rows="7" maxlength="100"></textarea>  
  10.     <span>{{100 - noofchars.length}} left</span>  
  11. </body>  
  12.   
  13. </html>  
Conclusion

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