Call Us Now!
Velachery: +91 9884412301 | OMR: +91 9600112302
info@credosystemz.com
AngularJS Training in ChennaiAngularJS Training in Chennai
  • Home
  • Course Content
  • Realtime Projects
  • Interview Q&A
  • Contact Us
  • Home
  • Course Content
  • Realtime Projects
  • Interview Q&A
  • Contact Us

Blog

  • Home
  • Blog
  • Types of Filters in AngularJS

Types of Filters in AngularJS

  • Posted by admin
  • Categories Blog
  • Date March 20, 2019
  • Comments 0 comment

AngularJS provides you list of amazing inbuilt filters.  You don’t need to write any additional methods to get use of these filters features. Just add the filter in your expression and Enjoy the Benefits.

To know more about All other services and Custom filters please visit Complete Topics of AngularJS
The following Lists of Filters available in  AngularJS. Also you can create your own custom Filters, if you want.

1.Currency

Currency Filter formats your number as Currency.

Syntax:

{{ currency_expression | currency : symbol : fractionSize}}

Explanation:

currency_expression – your Number.

currency – is a Filter.

Symbol (optional) – Currency symbol or identifier to be displayed.

fractionSize (optional)  – Number of decimal points to be round the amount.

If you don’t prove any symbol, by default it will take “$”

 

2.Date

Date filter formats your string into date by the way of you requested.

Syntax:

{{ date_expression | date : format : timezone}}

Explanation:

date – is filter.

format  (optional) – what type of date format you needed. If not provided, Default ‘mediumDate’ will set mmm, d, y (e.g. Sep 3, 2010).

List of formats are as,

‘short’,’medium’, ‘yyyy-MM-dd HH:mm:ss’

 

3.filter

filter component is one of the important and most often used filter component in Angularjs.

It’s used for filtering subset of  items from our predefined arry/object and it returns an new array.

Syntax:

{{ filter_expression | filter : expression }}

Explanation:

filter_expression – is your expression (array).

filter – is a filter component.

expression – Your expression may be string or object.

The string expression tries to get new set of array from your predefined array which is matched to all elements of an array.

The Object expression tries to get new set of an array from your predefined array which is matched to particular elements of an array.

 

4.json

json filter allows you convert regular javascript object into json string.

Syntax:

{{ json_expression | json : spacing}}

Explanation:

json_expression – is your java script object.

json – is a filter.

Spacing (optional) – The number of spaces to use per indentation. If you don’t provide. the default is  2.

 

5.lowercase / uppercase

This filter used to convert your data into lowercase or uppercase.

Syntax:

{{ lowercase_expression | lowercase}}

{{ lowercase_expression | uppercase}}

 

6.orderBy

The orderBy filter used for ordered alphabetically or numerically based on the expression value. Here the order represents both Ascending and Descending.

Syntax:

{{ orderBy_expression | orderBy : expression : reverse}}

Explanation:

orderBy_expression – is your array.

orderBy – is a filter.

expression – is which element should be in order.

reverse – is a Boolean value which indicates Ascending or Descending order. If the value is true, the order will be descending. If the value is false, the order will be ascending.

 

Click Here to learn All topics of AngularJS – AngularJS All Topics

  • Share:
admin

Previous post

Amazing Form Validation by using AngularJS
March 20, 2019

Next post

Top 10 Directives in AngularJS
March 20, 2019

You may also like

What is New in Angular 15? How to Upgrade to Angular 15?
9 May, 2023

Angular 15 Angular 15 is the latest version with numerous features and updates to improve the performance. It is important to know how to upgrade to Angular 15. The updates are made in the latest version to deliver a better …

A Guide to Angular 14 Features and New Updates
8 May, 2023

Introduction The Angular community released Angular 14 in 2022 with several improvements. Angular 14 has stand-alone components to reduce the need for Angular modules. It is the systematic pre-planned upgrade.Angular 14 is the most advanced,pre planned updates version to develop …

What is the latest technology of Angular?
3 May, 2023

Introduction To begin,Angular is one of the top front-end frameworks for web development. It is an open source, typescript based JavaScript framework to create dynamic, efficient web applications. Angular is worth learning with a lot of job opportunities. Typescript 4.7 …

Leave A Reply Cancel reply

Your email address will not be published. Required fields are marked *

CREDO SYSTEMZ – VELACHERY

New # 30, Old # 16A, Third Main Road,
Rajalakshmi Nagar, Velachery,
(Opp. to Murugan Kalyana Mandapam),
Chennai - 600 042.
Mobile: +91 9884412301
Email: info@credosystemz.com
Web: www.credosystemz.com

CREDO SYSTEMZ – OMR

Plot No.8, Vinayaga Avenue,
Rajiv Gandhi Salai, (OMR),
Okkiampettai,
Landmark - Okkiyampet Bus Stop,
Next to Buhari Hotel,
Chennai – 600 097.
Mobile: +91 9600112302

TRENDING COURSES

  • Python Training in Chennai
  • Data Science Training in Chennai
  • AWS Training in Chennai
  • Big Data Hadoop Training in Chennai
  • Machine Learning Training in Chennai
  • Angular Training in Chennai
  • Mean Stack Training in Chennai
  • RPA Training in Chennai
  • DevOps Training in Chennai
  • R Programming Training in Chennai
  • Microsoft Azure Training

Copyright 2022 Angularjstraininginchennai.in | All Rights Reserved