Sometimes the built-in filters in Angular cannot meet the needs or requirements for filtering output. In such a case a custom filter can be created which can pass the output in the required manner.
In the below example we are going to pass a string to the view from the controller via the scope object, but we don't want the string to be displayed as it is.
We want to ensure that whenever we display the string, we pass a custom filter which will append another string and displayed the completed string to the user.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.filter('Demofilter',function(){ return function(input) { return input + " Tutorial" } }); app.controller('DemoController',function($scope){ $scope.tutorial ="Angular"; }); </script> </body> </html>
Code Explanation:
If the code is executed successfully, the following Output will be shown when you run your code in the browser.
Output:
From the output,
Summary:
If there is a requirement that is not met by any of the filters defined in angular, then you can create your custom filter and add your custom code to determine the type of output you want from the filter.a