Filters in Angular Js

Filters in Angular Js

Angular js is more popular now days and for beginners, I will tell you what is Filters in angular js and show you a practical example of Filters using angular js

Introduction

Angular js is more popular now days and for beginners, I will tell you what is Filters in angular js and show you a practical example of Filters using angular js

Basically, this article will demonstrate with example the following:

• What is Filters
• Filters Type
• Details  of Filters Type
• How to use filters
• Example with Filters on view using AngularJS data binding

What is Filters

We can use Angular JS filter feature for displaying data it to the user. The formatted value of an expression is applied to your HTML output data in AugularJs. We can use built-in Filters or create your own filters like custom filters.

  

Filters Type

Below are Filter Types in AngularJs

1. Currency

2. Date

3. Filter

4. LimitTo

5. JSON

6. Lowercase

7. Uppercase

8. OrderBy

List of AngularJS Filters Table

S.No	Filter Name	Filter Description
1	Currency	It is used to formats number as currency
2	Date	It is used to date formats
3	Filter	It is used find the item from array
4	Lowercase	It is used to convert string as lowercase
5	LimitTo	It is containing new array with specified number of items
6	Json	It is used to convert javascript object to json object
7	OrderBy	It is used to order by array
8	Uppercase	It is used to convert string as uppercase

How to use filters  

1. {{ expression | filter_name }}  
2. {{ expression | filter_name1 | filter_name2 | ... }}  

Currency

1. {{ currency_expression | currency : symbol : fractionSize}}  

Lowercase

1. {{ lowercase_expression | lowercase}}  

Uppercase

1. {{ uppercase_expression | uppercase}}  

OrderBy

1. {{ orderBy_expression | orderBy : expression : reverse}}  

Number

1. {{ number_expression | number : fractionSize}}  

LimitTo

1. {{ limitTo_expression | limitTo : limit : begin}}  

JSON

1. {{ json_expression | json : spacing}}  

Filter

1. {{ filter_expression | filter : expression : comparator}}  

Date

1. {{ date_expression | date : format : timezone}}  

Example:

<tr>  

                    <td><strong>Full Name (in Capital Letters): </strong>{{employee.fullName() | uppercase}} <br /> </td>  

                </tr>  

                <tr>  

                    <td><strong>Full Name (in Normal Letters): </strong>{{employee.fullName() | lowercase}} <br /> </td>  

                </tr>  

                <tr>  

                    <td><strong>Salary: </strong>{{employee.salary | currency}}  <br /></td>  

                </tr>  

Output

Happy Programming!!

Don’t forget to leave your feedback and comments below!

If you have any query mail me to Sujeet.bhujbal@gmail.com     

Regards

Sujeet Bhujbal

--------------------------------------------------------------------------------

 Blog: www.sujitbhujbal.com

Personal Website :-http://sujitbhujbal.wordpress.com/

Facebook :-http://www.facebook.com/bhujbal.sujit

CodeProject:-http://www.codeproject.com/Members/Sujit-Bhujbal

DotNetHeaven:-http://www.dotnetheaven.com/Authors/sujit9923/sujit-bhujbal.aspx

CsharpCorner:-http://www.c-sharpcorner.com/Authors/sujit9923/sujit-bhujbal.aspx

Linkedin :-http://in.linkedin.com/in/sujitbhujbal

Stack-Exchange: http://stackexchange.com/users/469811/sujit-bhujbal

Twitter :-http://twitter.com/SujeetBhujbal

 JavaTalks :-http://www.javatalks.com/Blogger/sujit9923/

--------------------------------------------------------------------------------

Useful New features of C# 6.0

 Introduction

With the release of Visual Studio 2015, we also received C# 6.  In this article I will tell you top useful features for you to discover in C# 6.

• Auto-property Initializers: 

    If you want to set a default value for a property in a class, you do this in the constructor in C# 5 or less. C# 6 introduces Auto-property initializers that enable you to assign a default value for a property as part of the property declaration.
 

public class Person {     public int PersonId { get; set; }     public string FirstName { get; set; } = string.Empty;     public string LastName { get; set; } = string.Empty;     public string FullName { get { return string.Format("{0] {1}", FirstName, LastName); } }     public DateTime DateCreated { get; set; } = DateTime.UtcNow;     public DateTime BirthDate { get; set; }     public ICollection<Qualification> Qualifications { get; set; } = new HashSet<Qualification>(); }

• Expression Bodied members :  In C# 6, this expression can be used in the same way as the auto-property initializer, reducing the syntax down a bit:

public string FullName => string.Format("{0} {1}", FirstName, LastName);

• Getter-only auto-properties :  

          With C# 6, you can now omit the set accessor to achieve true readonly auto implemented properties:
 

public DateTime BirthDate { get; }

• String Interpolation : 

Rather than filling placeholders with indexes then provide an array of values to be slotted in at runtime, you provide the source of the parameter value instead, and the string.Format call is replaced by a single $sign. This is how the FullName property declaration looks when using string interpolation in the expression body instead:

public string FullName => $"{FirstName} {LastName}";

• Null-conditional operators: 

This is very useful if you want to simplify the null checks. 

var people = new List<Person>(); var name = string.Empty; if(people.FirstOrDefault() != null) {     name = people.First().FullName; }

The above code can be shortened to the below snippet 

var people = new List<Person>(); var name = people.FirstOrDefault()?.FullName;

• Index Initializers: 

This can be applied to index based collections like Dictionary. 

Dictionary<int, string> dict = new Dictionary<int, string> {     {1, "string1" },     {2, "string2" },     {3, "string3" } };

       Can be re-written as, 

Dictionary<int, string> dict = new Dictionary<int, string> {     [1] = "string1",     [2] = "string2",     [3] = "string3" };

Full Example:

The models Person and Qualification, has many-to-many relationship between them. 

public class Person {     public Person()     {         FirstName = string.Empty;         LastName = string.Empty;         DateCreated = DateTime.UtcNow;         Qualifications = new HashSet<Qualification>();     }     public int PersonId { get; set; }     public string FirstName { get; set; }     public string LastName { get; set; }     public string FullName { get { return string.Format("{0} {1}", FirstName, LastName); } }     public DateTime DateCreated { get; set; }     public DateTime BirthDate { get; set; }     public ICollection<Qualification> Qualifications { get; set; } }

public class Qualification {     public Qualification()     {         Awardees = new HashSet<Person>();         Name = string.Empty;     }     public int QualificationId { get; set; }     public string Name { get; set; }     public DateTime WhenAwarded { get; set; }     public virtual ICollection<Person> Awardees { get; set; } }

Happy programming!!

Don’t forget to leave your feedback and comments below!