Angular Slice Pipe Example
June 18, 2020
SlicePipe is Angular CommonModule API. Slice pipe slices a given array or string into subsets. We need to provide start and end index. The SlicePipe uses slice keyword with pipe operator. The SlicePipe uses JavaScript API Array.prototype.slice() and String.prototype.slice() to perform its task. On this page we will provide slice pipe example using array and string expression separately. We will discuss start and end index taking positive and negative values both. Now find the complete example step-by-step.
Contents
Software Used
Find the software used in our demo.1. Angular 9.1.11
2. Node.js 12.5.0
3. NPM 6.9.0
SlicePipe
SlicePipe is an angular Pipe API that belongs to CommonModule. The SlicePipe creates a new array or string from the given array or string respectively. Slice pipe uses slice keyword with pipe operator. Find the syntax.
array_or_string_expression | slice:start[:end]
Find the description.
array_or_string_expression : Expression that will result into an array or a string. This result will be input for slice pipe.
slice:
SlicePipe API uses slice keyword with pipe operator.
start: Starting index to slice given array or string to return as subset.
1. If start index is positive, slice pipe will return the elements at start index from start and the elements after in array or string expression.
2. If start index is negative, slice pipe will return the elements at start index from end and the elements after in array or string expression.
3. If start index is positive and greater than the size of string or array expression then slice pipe will return empty.
4. If start index is negative and greater than the size of string or array expression then slice pipe will return complete array or string.
end: Ending index to slice given array or string to return as subset.
1. If end index has not been provided then slice pipe will return elements till end.
2. If end index is positive then slice pipe will return all elements before end index from the start of the array or string expression.
3. If end index is negative then slice pipe will return all elements before end index from the end of the array or string expression.
SlicePipe using String Expression
Suppose expression is a string as given below.myStr = "abcdefghijk";
0 1 2 3 4 5 6 7 8 9 10 | | | | | | | | | | | a b c d e f g h i j k | | | | | | | | | | | -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1
{{myStr | slice:3:7}}
defg
start = 3
end = 7
Slice pipe will return substring starting from index 3 i.e character d and will include all characters before index 7 i.e up to g. The character at end index will not be included in the output substring.
2. Find the slice pipe with positive start and negative end index.
{{myStr | slice:3:-2}}
defghi
start = 3
end = -2
Slice pipe will return substring starting from index 3 i.e character d and will include all characters before index -2 i.e up to i.
3. Slice pipe with positive start index only.
{{myStr | slice:6}}
ghijk
start = 6
In the output substring there are all the characters starting from index 6 i.e g up to end.
4. Slice pipe with negative start index only.
{{myStr | slice:-6}}
fghijk
start = -6
In the output substring there are all the characters starting from index -6 i.e f up to end.
Now find the component used in our example for slice pipe using string expression.
string.slicepipe.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'string-app',
template: `
<h3>String Example</h3>
{{myStr | slice:3:7}} <br/>
{{myStr | slice:3:-2}} <br/>
{{myStr | slice:6}} <br/>
{{myStr | slice:-6}} <br/>
`
})
export class StringSlicePipeComponent {
myStr: string = "abcdefghijk";
}
String Example defg defghi ghijk fghijk
SlicePipe using Array Expression
Now we will discuss slice pipe with array expression. In our example we have an array as follows.myArray = [11,22,33,44,55,66,77,88];
0 1 2 3 4 5 6 7 | | | | | | | | 11 22 33 44 55 66 77 88 | | | | | | | | -8 -7 -6 -5 -4 -3 -2 -1
1.
{{myArray | slice:3:6}}
44,55,66
{{myArray | slice:2:-4}}
33,44
{{myArray | slice:5}}
66,77,88
{{myArray | slice:-5}}
44,55,66,77,88
Now find the component used in our example for array expression.
array.slicepipe.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'array-app',
template: `
<h3>Array Example</h3>
{{myArray | slice:3:6}} <br/>
{{myArray | slice:2:-4}} <br/>
{{myArray | slice:5}} <br/>
{{myArray | slice:-5}} <br/>
<ul>
<li *ngFor="let num of myArray | slice:2:5">
{{num}}
</li>
</ul>
`
})
export class ArraySlicePipeComponent {
myArray: number[] = [11,22,33,44,55,66,77,88];
}
Array Example
44,55,66
33,44
66,77,88
44,55,66,77,88
33
44
55
<li *ngFor="let num of myArray | slice:2:5">
{{num}}
</li>
ngFor will work on the elements of the subset obtained from
myArray | slice:2:5
Component and Module
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<string-app> </string-app>
<array-app> </array-app>
`
})
export class AppComponent { }
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {StringSlicePipeComponent} from './string.slicepipe.component';
import {ArraySlicePipeComponent} from './array.slicepipe.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent,
ArraySlicePipeComponent,
StringSlicePipeComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.
