AngularJs input text character count directive

This directive will help you to count number of characters in input element its applied on. It will create a paragraph (<p>) element next to element its applied on and will show count in it. You can also customize count message to show.

/** *  How to use : * *  Apply 'char-count' attribute on text input fields/textarea * *  Other properties: *  char-count-msg="countMsg"  : returns a string with count and max-length (Eg: "5 out of 100") *  char-count-auto-show-message="true" : auto display count message near to text inputs * */'use strict';(function () {    let app = angular.module('testApp');    app.directive('charCount', ['$log', '$timeout', function ($log, $timeout) {        return {            restrict: 'A',            scope: {                charCountMsg: "=?",                charCountAutoShowMessage: "@"            },            compile: function compile() {                return {                    post: function postLink(scope, iElement, iAttrs) {                        //angular.element(iElement).parent().append("<p>test</p>");                        function prepareAndAppendMsg() {                            if (iAttrs.maxlength) {                                scope.charCountMsg = iElement.val().length + " out of " + iAttrs.maxlength;                            } else {                                scope.charCountMsg = iElement.val().length;                            }                            if (scope.charCountAutoShowMessage === 'true') {                                scope.pElement[0].innerText = scope.charCountMsg;                            }                        }                        if ((iElement[0].tagName === "TEXTAREA" && iElement[0].type === "textarea") || (iElement[0].tagName === "INPUT" && iElement[0].type === "text")) {                            if (scope.charCountAutoShowMessage === 'true') {                                scope.pElement = angular.element("<p class='char-count-para'></p>");                            }                            iElement.bind('keyup', function () {                                scope.$apply(function () {                                    prepareAndAppendMsg();                                });                            });                            iElement.bind('paste', function () {                                $timeout(function () {                                    scope.$apply(function () {                                        prepareAndAppendMsg();                                    });                                }, 200);                            });                            iElement.bind('focus', function () {                                if (scope.charCountAutoShowMessage === 'true') {                                    // append element and re-calculate size                                    angular.element(iElement).parent().append(scope.pElement);                                    prepareAndAppendMsg();                                }                            });                            iElement.bind('blur', function () {                                if (scope.charCountAutoShowMessage === 'true') {                                    angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);                                }                            });                        }                        //angular.element(iElement).parent().prepend(angular.element(iElement).parent().lastChild);                        //angular.element(iElement).parent()[0].removeChild(angular.element(iElement).parent()[0].lastChild);                    }                };            }        };    }]);})();

 

Comments

Post a Comment

Popular posts from this blog

MATLAB code for Circular Convolution using Matrix method

Image
% circular convolution using matrix method %clc;x=[1,2,3,1];h=[4,3,2,2];H=zeros(0);h_index=1;N=length(x);y=zeros(0);disp('x(n)=');disp(x);disp('h(n)=');disp(h);subplot(4,1,1);stem(x);title('Signal One : x(n) ');subplot(4,1,2);stem(h);title('Signal Two : h(n)');temp=0;for i=1:NH(i,1)=h(i);end;for i=2:N    h=circshift(h, [0,1]);    for j=1:N     H(j,i)= h(j);   end;end;disp('H =>>');disp(H);for i=1:N    for j=1:N        temp=temp+H(i,j)*x(j);    end;    y(i)=temp;    temp=0;end;disp('Circular Convolution : y(m)==>');disp(y);subplot(4,1,3);stem(y);title('Circular Convolution: y(m)');   Output:
Read more

Positive number pipe in angular 2+

Code: import {Pipe, PipeTransform} from '@angular/core'; @Pipe({   name: 'positive' }) export class PositivePipe implements PipeTransform {   transform(value: number, args?: any): any {     return Math.abs(value);   } } How to use: {{ someNumber| positive }}
Read more