Quick Contact


    Custom Filters in AngularJS

    Angular JS provides a way to create our own filter that is customized filter. You can create one by registering a filter factory function in a module. AngularJS Filter function should be a pure function. Pure function means the same result is produced as per the given input. Also, it should not affect an external state.

    Example
    	
    	< html lang="en">
    	< head>
    	< meta charset="UTF-8">
    	< title>Example - example-filter-reverse-production< /title>
    	< script src="//code.angularjs.org/1.7.7/angular.min.js">
    	< /script>
    	< script src="script.js">< /script>
    	< /head>
    	< body ng-app="ReverseFilter">
    	< div ng-controller="ReverseController">
    	< input ng-model="msg" type="text">< br>
    	Content with No filter: {{msg}}< br>
    	Content after Reverse filter: {{msg|reverse}}< br>
    	Content after Reverse Filter in uppercase: {{msg|reverse:true}}< br>
    	< /div>
    	< /body>
    	< script>
    	(function(angular) {
    	'use strict';
    	angular.module('ReverseFilter', [])
    	.filter('reverse', function() {
    	returnfunction(input, uppercase) {
    	input = input || '';
    	var out = '';
    	for (var x = 0; x < input.length; x++) {
    	out = input.charAt(x) + out;
    	}
    	// conditional based on optional argument
    	if (uppercase) {
    	out = out.toUpperCase();
    	}
    	return out;
    	};
    	})
    	.controller('ReverseController', ['$scope', 'reverseFilter', 
    	function($scope, reverseFilter) {
    	$scope.msg = 'angular';
    	$scope.filteredMessage = reverseFilter($scope.msg);
    	}]);
    	})(window.angular);
    	< /script>
    	< /html>
    	
    Output

    Ducat

    Content with No filter: Ducat

    Content after Reverse filter: tacuD

    Content after reverse filter in uppercase: TACUD

    Testing of Custom Filters

    Like any other code, we can check filtered code also. Before each(module(‘core’)) loads the core module into the injector. Core module contains the checkmark filter.

    Example
    	describe('checkmark', function() {
    	beforeEach(module('core'));
    	it('should convert boolean values to unicode checkmark or cross',
    	inject(function(checkmarkFilter) {
    	expect(checkmarkFilter(true)).toBe('\u2713');
    	expect(checkmarkFilter(false)).toBe('\u2718');
    	})
    	);
    	});
    	

    Enroll Yourself in Live Classes For Angular Tutorials.

    AngularJS Filters in Controller, Directive, and Services

    We can use AngularJS Filter inside the components like directives, controller and services.

    To implement this you have to inject < filtername>Filter into your component.

    Like in below example, we can inject the filterFilter to implement this. The injected argument is a function with two parameters. The first argument is the value that needs to be a formatted and the second argument is the filter parameters starting with.

    Let’s see this with an example
    	
    	< html lang="en">
    	< head>
    	< meta charset="UTF-8">
    	< title>Example - example-filter-in-controller-production< /title>
    	< scriptsrc="//code.angularjs.org/1.7.7/angular.min.js">< /script>
    	< script src="script.js">< /script>
    	< /head>
    	< body ng-app="FilterModule">
    	< div ng-controller="FilterinController as ctrl">
    	< div>
    	All entries:
    	< span ng-repeat="entry in ctrl.array">{{entry.name}} < /span>
    	< /div>
    	< div>
    	Entries that contain "i":
    	< span ng-repeat="entry in ctrl.filteredArr">{{entry.name}} 
    	< /span>
    	< /div>
    	< /div>
    	< /body>
    	< script>
    	(function(angular) {
    	'use strict';
    	angular.module('FilterModule', []).
    	controller('FilterinController', ['filterFilter', functionFilterController(filterFilter) {
    	this.array = [
    	{name: 'Ajay'},
    	{name: 'Abhay'},
    	{name: 'Brian'},
    	{name: 'Peter'},
    	{name: 'Navi'}
    	];
    	this.filteredArr = filterFilter(this.array, 'i');
    	}]);
    	})(window.angular);
    	< /script>
    	< /html>
    	
    Output:

    All entries: Ajay Abhay Brian Peter Navi

    Entries that contain “i”: Brian Navi

    Stateful Filter

    It is discouraged to write stateful filters because angularJS cannot optimize its execution. Rather than writing a stateful filter, you can mark a filter as stateful. By marking a filter as stateful, during each digest cycle filter can execute one or more time.

    	
    	< html lang="en">
    	< head>
    	< meta charset="UTF-8">
    	< title>Example - example-filter-stateful-production< /title>
    	< script src="//code.angularjs.org/1.7.7/angular.min.js">
    	< /script>
    	< script src="script.js">< /script>
    	< /head>
    	< body ng-app="StatefulFilter">
    	< div ng-controller="StatefulController">
    	No filter: {{msg}}< br>
    	Decorated: {{msg | decorate}}< br>
    	< /div>
    	< /body>
    	< script>
    	(function(angular) {
    	'use strict';
    	angular.module('StatefulFilter', [])
    	.filter('decorate', ['decoration', function(decoration) {
    	functiondecorateaFilter(input) {
    	returndecoration.symbol + input + decoration.symbol;
    	}
    	decorateaFilter.$stateful = true;
    	returndecorateaFilter;
    	}])
    	.controller('StatefulController', ['$scope', 'decoration', 
    	function($scope, decoration) {
    	$scope.msg = 'angular';
    	$scope.decoration = decoration;
    	}])
    	.value('decoration', {symbol: '*'});
    	})(window.angular);
    	< /script>
    	< /html>
    	
    Output:

    No Filter: Angular

    Decorated: *angular*

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.