DEV Community

Anubhab Mukherjee for This is Angular

Posted on

Built-In Angular Pipes -Part 4

Today we will continue to learn the built in Angular pipes.
Pipes covered in this post -

JsonPipe
KeyValuePipe


JsonPipe
This pipe is used to format a data into JSON-format representation.
Mostly I use for debugging purpose.

It is Exported from the CommonModule

Syntax
{{ value_expression | json }}

Its a simple pipe.
Lets see the example. Our project folder -

Image description
In the component.ts file lets write the below code -

  jsonPipeData = {
    studentName: "John Doe",
    studentMarks: 423
  };
Enter fullscreen mode Exit fullscreen mode

& in the html lets paste in the below code -

<h2>JSON Pipe</h2>
<h4>Without the pipe</h4>
<p>{{jsonPipeData}}</p>
<br>
<h4>With the pipe</h4>
<p>{{jsonPipeData | json}}</p>
Enter fullscreen mode Exit fullscreen mode

Now, lets see the output -
Image description

Here you can see without the pipe the output is [object Object]
It is not able to process the code. But after using the pipe we can view the correct data.
So, you can use this pipe to verify the data coming in the component by displaying directly in the template.


KeyValuePipe
This pipe is used to convert an Object or Map into an array of key value pair.

Syntax
{{ input_expression | keyvalue [ : compareFn ] }}

It is Exported from CommonModule

Parameters
compareFn
If you want to provide a custom sorting function.
It is Optional
Default is the defaultComparator which Angular provides to sort.

Now lets see an example -
So in the component.ts file lets add the below code -

  obj = {
    'chair': '23',
    'banana': '3',
    'apple': '4',
  };


Enter fullscreen mode Exit fullscreen mode

Please note that we have put the first key as chair and apple at the end.

Now lets paste the below code in the template file.

<hr>

<h2>KeyValue Pipe</h2>
{{ obj | keyvalue | json }}
Enter fullscreen mode Exit fullscreen mode

You would see the below output -

Image description

Here few important points to observe -

  1. We have added one more pipe the json pipe along with the keyvalue. So we can chain multiple pipe at the same time. Output of the first pipe acts as the input to the second.
  2. In the output you can see the key apple came at the beginning (it got sorted) while chair at the end although the value provided was opposite.
  3. We received an array of key-value objects.

Note
We already saw a glimpse of sorting. The keyValue pipe use the defaultComparator to sort the output values.
Following ae the key points to note-

  1. If the key is a number then it will sort in Ascending Order.
  2. If key is string then it will sort in alphabetic order.
  3. If key is of different type then it will get converted to string
  4. If key is null or undefined then it will be put at the very end.

Custom Sorting Values using compareFn
Now lets write a custom function which will sort the list on its values. So paste in the below code in the component.ts file

 orderbyValueAsc = (a: KeyValue<string, string>, b:
 KeyValue<string, string>): number => {
    return Number(a.value) < Number(b.value) ? -1 : 
(Number(a.value) > Number(b.value)) ? 0 : 1
  }
Enter fullscreen mode Exit fullscreen mode

& in the template file we need to pass the compare function also -

{{ obj | keyvalue: orderbyValueAsc | json }}
Enter fullscreen mode Exit fullscreen mode

So we write : orderbyValueAsc

The output in the browser you will see -
Image description

There can be a scenario where you want to keep the original value. In that case we can write the below function in the component ts file -
keepOriginal(a: any, b: any) {
return a;
}

That's all for now. I will be discussing on the remaining pipes in the coming posts. So stay tuned.

Hope you enjoyed the post.
If yes do like share and comment.

Cheers!!!
Happy Coding

Discussion (0)