Post
Ask Question

How To Use Angular Filters

Introduction

In this blog, we will learn how to use Angular JS Filters.

The following filters are available in Angular js:

  • Currency: Format a number to a currency format.
  • Date: Format a date to a specified format.
  • Filter: Select a subset of items from an array.
  • Json: Format an object to a JSON string.
  • limitTo: Limits an array/string, into a specified number of elements/characters.
  • Lowercase: Format a string to lower case.
  • Number: Format a number to a string.
  • orderBy: Orders an array by an expression.
  • Uppercase: Format a string to upper case.

Step 1

Create an empty project in the Visual Studio of your choice.

Step 2

Add scripts and styles in head section.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
  4. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  
  5. <script src="Employee.js"></script>  

Step-3 

Add web form for each filter right click project add new item choose web form or you can do all filters on one page  -- it’s up to you.

Step-4

Create employee script and give the name Employee.js

  1. var app = angular  
  2.         .module("myModule", [])  
  3.         .controller("myController", function ($scope) {  
  4.             var employees = [  
  5.             { Name: "Airi Satou", Position: "Accountant", Office: "Tokyo", Salary: "162700", Start_Date:new Date("November 28, 2008") },  
  6.             { Name: "Bruno Nash", Position: "Software Engineer", Office: "London", Salary: "163500", Start_Date:new Date("May 03, 20113") },  
  7.             { Name: "Cedric Kelly", Position: "Senior Javascript Developer", Office: "Edinburgh", Salary: "106450", Start_Date: new Date("August 13, 2015") },  
  8.             { Name: "Dai Rios", Position: "Integration Specialist", Office: "Edinburgh", Salary: "162700", Start_Date: new Date("September 23, 2015") },  
  9.             { Name: "Finn Camacho", Position: "Pre-Sales Support", Office: "London", Salary: "163500", Start_Date: new Date("December  31, 2016") },  
  10.             { Name: "Garrett Winters", Position: "Sales Assistant", Office: "Edinburgh", Salary: "86000", Start_Date: "March 20, 2014" },  
  11.             { Name: "Hermione Butler", Position: "Customer Support", Office: "London", Salary: "132000", Start_Date: "Feb 1, 2017" },  
  12.             { Name: "Jackson Bradshaw", Position: "Support Engineer", Office: "Edinburgh", Salary: "206850", Start_Date: "Jan 10, 2010" },  
  13.             { Name: "Lael Greer", Position: "Software Engineer", Office: "London", Salary: "145600", Start_Date: "April 30, 2014" },  
  14.             { Name: "Martena Mccray", Position: "Team Leader", Office: "Edinburgh", Salary: "433060", Start_Date: "May 28, 2013" },  
  15.             { Name: "Olivia Liang", Position: "Developer", Office: "London", Salary: "145600", Start_Date: "July 11, 2015" },  
  16.             { Name: "Paul Byrd", Position: "Chief Financial Officer (CFO)", Office: "New York", Salary: "725000", Start_Date: "October 18, 2016" }  
  17.             ];  
  18.             $scope.employees = employees;  
  19.  });  

Step 5

Design HTML web page:

  1. <body ng-controller="myController">  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-3">  
  4.             <h4 class="text-center text-uppercase">How to use filters in Angular js</h4>  
  5.             <table id="employee" class="table table-bordered">  
  6.                 <thead class="bg-info text-white text-upparcase">  
  7.                     <tr>  
  8.                         <th>Name  
  9.                         </th>  
  10.                         <th>Position  
  11.                         </th>  
  12.                         <th>Office  
  13.                         </th>  
  14.                         <th>Salary  
  15.                         </th>  
  16.                         <th>Start Date  
  17.                         </th>  
  18.                     </tr>  
  19.                 </thead>  
  20.                 <tbody>  
  21.                     <tr ng-repeat="employee in employees">  
  22.                         <td>{{employee.Name}}</td>  
  23.                         <td>{{employee.Position}}</td>  
  24.                         <td>{{employee.Office}}</td>  
  25.                         <td>{{employee.Salary}}</td>  
  26.                         <td>{{employee.Start_Date}}</td>  
  27.                     </tr>  
  28.                 </tbody>  
  29.             </table>  
  30.         </div>  
  31.     </form>  
  32. </body>  

Currency filter

{{employee.Salary|currency}}

Angular 

Date filter

{{employee.Start_Date|date:"dd/MM/yyyy"}}

 Angular

Filter

  1. <body ng-controller="myController">  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-3">  
  4.             <h4 class="text-center">How to use <u>filter</u> in Angular js</h4>              
  5.             <label>Search: <input type="text" placeholder="search employees" class="form-control" ng-model="searchText"/></label>        
  6.             <table class="table table-bordered">  
  7.                 <thead class="bg-info text-white text-upparcase">  
  8.                     <tr>  
  9.                         <th>Name  
  10.                         </th>  
  11.                         <th>Position  
  12.                         </th>  
  13.                         <th>Office  
  14.                         </th>  
  15.                         <th>Salary  
  16.                         </th>  
  17.                         <th>Joining Date  
  18.                         </th>  
  19.                     </tr>  
  20.                 </thead>  
  21.                 <tbody>  
  22.                     <tr ng-repeat="employee in employees|filter:searchText">  
  23.                         <td>{{employee.Name}}</td>  
  24.                         <td>{{employee.Position}}</td>  
  25.                         <td>{{employee.Office}}</td>  
  26.                         <td>{{employee.Salary}}</td>  
  27.                         <td>{{employee.Start_Date|date:"dd/MM/yyyy"}}</td>  
  28.                     </tr>  
  29.                 </tbody>  
  30.             </table>  
  31.         </div>  
  32.     </form>  
  33. </body>  
Angular 

Json Filter

  1. <body ng-controller="myController">  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-3">  
  4.             <h4 class="text-center">How to use <u>json</u> filter in Angular js</h4>              
  5.             <pre>{{employees | json}}</pre>  
  6.         </div>  
  7.     </form>  
  8. </body>  
Angular 

limitTo Filter

  1. <body ng-controller="myController">  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-3">  
  4.             <h4 class="text-center">How to use <u> limitTo</u> filter in Angular js</h4>  
  5.             <label>Rows to display : <input type="number" step="1" ng-model="rowCount" max="5" min="0" class="form-control" /></label>  
  6.                 
  7.             <table class="table table-bordered">  
  8.                 <thead class="bg-info text-white text-upparcase">  
  9.                     <tr>  
  10.                         <th>Name  
  11.                         </th>  
  12.                         <th>Position  
  13.                         </th>  
  14.                         <th>Office  
  15.                         </th>  
  16.                         <th>Salary  
  17.                         </th>  
  18.                         <th>Joining Date  
  19.                         </th>  
  20.                     </tr>  
  21.                 </thead>  
  22.                 <tbody>  
  23.                     <tr ng-repeat="employee in employees| limitTo:rowCount">  
  24.                         <td>{{employee.Name}}</td>  
  25.                         <td>{{employee.Position}}</td>  
  26.                         <td>{{employee.Office}}</td>  
  27.                         <td>{{employee.Salary}}</td>  
  28.                         <td>{{employee.Start_Date|date:"dd/MM/yyyy"}}</td>  
  29.                     </tr>  
  30.                 </tbody>  
  31.             </table>  
  32.         </div>  
  33.     </form>  
  34. </body  
Angular 

Lowercase

{{employee.Office|lowercase}}

Angular 

Number

{{employee.Salary|number}}

Angular 

Uppercase

{{employee.Position|uppercase}}

 Angular

OrderBy

  1. <body ng-controller="myController">  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-3">  
  4.             <h4 class="text-center">How to use <u>orderBy</u> filter in Angular js</h4>  
  5.             <label>Sort By :</label>   
  6.         <select ng-model="sortColumn" class="custom-select col-md-3">  
  7.             <option value="Name">Name ASC</option>  
  8.             <option value="+Start_Date">Joining Date ASC</option>  
  9.             <option value="+Position">Position ASC</option>  
  10.             <option value="+Office">Office ASC</option>  
  11.             <option value="-Salary">Salary DESC</option>  
  12.         </select>  
  13.             <br />  
  14.             <br />  
  15.             <table class="table table-bordered">  
  16.                 <thead class="bg-info text-white text-upparcase">  
  17.                     <tr>  
  18.                         <th>Name  
  19.                         </th>  
  20.                         <th>Position  
  21.                         </th>  
  22.                         <th>Office  
  23.                         </th>  
  24.                         <th>Salary  
  25.                         </th>  
  26.                         <th>Joining Date  
  27.                         </th>  
  28.                     </tr>  
  29.                 </thead>  
  30.                 <tbody>  
  31.                     <tr ng-repeat="employee in employees|orderBy:sortColumn">  
  32.                         <td>{{employee.Name}}</td>  
  33.                         <td>{{employee.Position}}</td>  
  34.                         <td>{{employee.Office}}</td>  
  35.                         <td>{{employee.Salary}}</td>  
  36.                         <td>{{employee.Start_Date|date:"dd/MM/yyyy"}}</td>  
  37.                     </tr>  
  38.                 </tbody>  
  39.             </table>  
  40.         </div>  
  41.     </form>  
  42. </body>  
Angular
 
Conclusion

In this blog, we have discussed all nine Angular js filters with a single Angular controller.

Step by step I have given example for all the filters. I hope you have understood all the filters.
Next Recommended Reading Angular 7 Table Reusable Filter Pipe