Angular Pipe Created: 11 Jan 2026 Updated: 11 Jan 2026

Angular Pipes-2

1. The Slice Pipe (slice)

Description:

The slice pipe is used to extract a subset of a collection. It works on both Strings and Arrays. It creates a new instance containing only the elements from the specified start index up to (but not including) the end index.

Possible Values & Parameters:

  1. start: The zero-based index where the slice begins (inclusive). If negative, it indicates an offset from the end of the sequence.
  2. end: (Optional) The zero-based index where the slice ends (exclusive). If omitted, it slices until the end of the sequence.

Code Example:

<h3>Top 3 Items:</h3>
<ul>
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>
</ul>

<p>{{ 'Angular 21 Framework' | slice:0:7 }}...</p>

2. The JSON Pipe (json)

Description:

The json pipe converts a JavaScript object or array into a formatted JSON string. Its primary purpose is debugging. Instead of seeing [object Object] on your screen, you can see the actual properties and values inside your data structure.

Possible Values:

  1. It takes no parameters. It simply serializes the input using JSON.stringify.

Code Example:

<h3>Debug User Object:</h3>
<pre>{{ user | json }}</pre>

The KeyValue Pipe (keyvalue)

Description

By default, the *ngFor directive in Angular can only iterate over Arrays. If you try to loop through a standard JavaScript Object or a Map, Angular will throw an error. The keyvalue pipe transforms these structures into an array of objects, where each entry contains a key and a value property.

TypeScript Side (.ts)

In your component, you define the data as a standard Object or a Map. We also often define a comparator function if we want to change the default alphabetical sorting.

import { Component } from '@angular/core';
import { CommonModule, KeyValue } from '@angular/common';

@Component({
selector: 'app-key-value-demo',
standalone: true,
imports: [CommonModule],
templateUrl: './key-value-demo.component.html'
})
export class KeyValueDemoComponent {
// 1. A standard JavaScript Object
userProfile = {
username: 'stefan_dev',
status: 'active',
location: 'Europe',
id: 99
};

// 2. A JavaScript Map (Modern approach)
configMap = new Map([
['theme', 'dark'],
['language', 'en'],
['version', '21.0.0']
]);

// 3. Optional: Custom Comparator (To keep original order)
// By default, keyvalue sorts alphabetically.
// Returning 0 prevents sorting.
keepOrder = (a: KeyValue<any, any>, b: KeyValue<any, any>): number => {
return 0;
}
}

Template Side (.html)

In the template, you apply the pipe to the object or map. You access the data using .key and .value.

<h3>User Profile (Sorted by Key)</h3>
<ul>
<li *ngFor="let item of userProfile | keyvalue">
<strong>{{ item.key }}:</strong> {{ item.value }}
</li>
</ul>

<hr>

<h3>Configuration Settings (Original Order)</h3>
<div *ngFor="let setting of configMap | keyvalue: keepOrder">
<span>Key: {{ setting.key }}</span> —
<span>Value: {{ setting.value }}</span>
</div>

Summary Table: Collection Management

PipeTarget TypeMain Use CaseBehavior
sliceArray, StringPagination / TruncationReturns a subset of data.
jsonAny ObjectDebuggingConverts data to a readable string.
keyvalueObject, MapIterationMakes objects compatible with *ngFor.


Share this lesson:

Details

Category
Angular
Sub: Pipe
View All Courses Back to Lessons

Navigation

Progress 14 / 22
Start 64% Complete
Angular Pipes-1 Custom Pipe
Statistics
6 Lessons in Pipe
4 SubCategories in Angular
22 Total Lessons in Angular