How to create custom filter for your AngularJS Project
Posted By : Rohit Goyal | 07-Apr-2017
You often concerned about how to use a custom filter in your project. That can be accessible in your whole project.In this blog, I will explain to you how you can us a custom filter in your Project.
Things to know before creation:-
i) Custom filter Must be created inside a existing module
eg:- module.App
ii) Custom filter always takes one argument. Which is the input to the filter.
eg:- amount | mycustomfilter
In above example input to the mycustomfilter filter is amount.
iii) Any extra arguments to the filter must be passed using a colon operator.
eg:- amount | mycustomfilter : arg1:arg2:...
In above example amount is primary input and we are passing other arguments as agr1,arg2..
Step 1:- first of all add the angular library file in your index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
Step 2:- Add below styles in your stylesheet.
table{width:100%;}
table, th, td { border: 1px solid black;border-collapse: collapse;}
Step 3:- Below this is the HTML code, that you have to insert in your HTML file.
<div ng-controller="DetailCtrl"><table>
<tr>
<th>Book Id</th>
<th>Name</th>
<th>Publisher</th>
<th>Price</th>
</tr>
<tr ng-repeat="b in Books">
<td>{{b.bookId}}</td>
<td>{{b.bookName}}</td>
<td>{{b.publisher}}</td>
<td>{{b.price | MyCustomFilter:10}}</td>
</tr>
</table>
</div>
Price is default argument and 10 is secondry argument.That is our discount.
Step 4:- Below the js code that you have to include inside your js file
var App = angular.module("App",[]);
App.filter("MyCustomFilter",function(){
// console.log("My Custom filter called");
return function(input,discount){
// Here input the default argument and discount is the further argument that we have passed.
//Here we are returing the discounted price taking current price in input and also we are taking further argument discount
var discountedPrice = (input/100) * discount;
return "Original Price Rs. " + input + ". with discounted: Rs "+(input-discountedPrice);
}
});
// Inside your controller you can pass your custom data in the from of json.
App.controller("DetailCtrl",function($scope){
$scope.Books = [
{
bookId:1,
bookName:"B",
publisher:"BPress",
price:85
},{
bookId:2,
bookName:"A",
publisher:"APress",
price:95
},{
bookId:3,
bookName:"C",
publisher:"BPress",
price:100
},{
bookId:4,
bookName:"D",
publisher:"BPress",
price:110.59
},{
bookId:5,
bookName:"D",
publisher:"CPress",
price:110.59
},{
bookId:6,
bookName:"D",
publisher:"DPress",
price:110.59
},{
bookId:7,
bookName:"D",
publisher:"BPress",
price:110.59
},{
bookId:8,
bookName:"D",
publisher:"APress",
price:110.59
}
]
});
That's it. Now you can run this code.You will obtain the current price and discounted price using custom filter.
custom filter created inside your app module available inside your whole project.You can use it from anywhere.
If you have any doubt feel free to contact me at my Skype Id:- rohit.oodles
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.