Angular Slice Pipe Example

In Angular Slice Pipe Example, We have a few built-in pipes. In this blog post, we’ll learn about slice pipe in Angular.

We’ll see an example of using slice pipe with Array and String Expression.
In Angular, Pipe is something that takes in data as input and transforms it into the desired output.

Table of Contents

SlicePipe

SlicePipe is an API provided by angular. It is part of angular CommonModule.

It creates a new Array or String containing a subset(slice) of the elements.

SlicePipe is using Javascript API such as Array.prototype.slice() and String.prototype.slice() under the hood.

SlicePipe is Parameterized Pipe. Parameterized Pipe accepts any number of optional parameter to get the desired output from the given input.

To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as slice:1).

If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5).

{{ value_expression | slice : start [ : end ] }}

The basic format of SlicePipe is as above.

Now we’ll see each fragment one by one :

value_expression : It’s the input list or string to be sliced.
pipe operator( | ) : In angular, this is known as pipe operator, which tells angular that we are declaring pipe
slice : It’s a keyword that tells angular that we are using SlicePipe.
start : It is a number type and It’s the starting index to slice the given input(array or string) to return as a subset.

It has the following variation based on the value of it.

If the start index is positive value : SlicePipe will return the item at start index and all items after in the list or string expression.
If the start index is negative value : SlicePipe will return the item at start index from the end and all items after in the list or string expression.
If the start index is positive and greater than the size of the expression : SlicePipe will return an empty list or string.
If the start index is negative and greater than the size of the expression : SlicePipe will return the entire list or string.

end: It is a number type and It’s the ending index to slice the given input(array or string) to return as a subset.
It also has the following variation based on the value of it.

If end index omitted/not provided : SlicePipe will return all items until the end.
If end index is positive : SlicePipe will return all items before end index of the list or string.
If end index is negative : SlicePipe will return all items before end index from the end of the list or string.

Slice Pipe Example

Array Expression Example

Now we will see an example of SlicePipe using Array Expression.
We’ll take the following array to understand the example.


var arr = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50];

Example 1 :
Slice Pipe with positive start and end index (i.e start: 2 and end : )


{{arr | slice: 2:5}}

Output


[15,20,25,30]

Example 2
Slice pipe with only positive start index


{{arr | slice: 6}}

Output


[35,40,45,50]

Example 3
Slice pipe with only a negative start index


{{arr | slice: -3}}

Output


[40,45,50]

Example 4
Slice pipe with a positive start index and negative end index


{{arr | slice: 3:-3}}

Output


[20,25,30,35,40]

Our component will look as follows:


import { Component } from "@angular/core";
@Component({
  selector: "app-slice-pipe-example",
  template: `
    <h1>Slice Pipe Example</h1>
    {{ arr | slice: 2:5 }} {{ arr | slice: 6 }} {{ arr | slice: -3 }}
    {{ arr | slice: 3:-3 }}
  `
})
export class SlicePipeExampleComponent {
  arr = [10, 15, 20, 25, 30, 35, 40, 45, 50];
}

We can use SlicePipe with ngFor as follow:


<div *ngfor="let item of arr | slice:2:5">  {{item}}</div>

When SlicePipe is used with ngFor, ngFor will be applied to the subset of arr obtained using slice pipe.

String Expression Example

Let’s suppose we are having following string expression.


var str="slice pipe example";

Example 1
Slice pipe with positive start index and end index


{{arr | slice: 4:6}}

Output

c p

Example 2
Slice pipe with only positive start index


{{arr | slice: 6}}

Output


pipe example

Example 3
Slice pip with only negative start index


{{arr | slice: -3}}

Output

ple

Example 4
Slice pipe with positive start index and negative end index


{{arr | slice: 3:-3}}

Output


ce pipe examp

I hope you like this Angular Slice Pipe Example article. 🙂

Also, read:

Angular CRUD operation Example