Home  >  Angular

Angular Slice Pipe Example

By Arvind Rai, June 18, 2020
On this page we will provide Angular slice pipe example. The 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.

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"; 
We have given a number per character to our input string to understand start and end index. Index starts from 0.
 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 
1. Find the slice pipe with positive start and positive end index.
{{myStr | slice:3:7}} 
Find the output.
defg 
In our example we have following indexes.
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}} 
Find the output.
defghi 
In our example we have following indexes.
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}} 
Find the output.
ghijk 
In our example we have index as follows.
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}} 
Find the output.
fghijk 
In our example we have index as follows.
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";
} 
Find the output.
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]; 
Find the index detail.
 0    1   2   3   4   5   6   7
 |    |   |   |   |   |   |   |
 11  22  33  44  55  66  77  88
 |    |   |   |   |   |   |   |
-8   -7  -6  -5  -4  -3  -2  -1 
The element at start index is included and the element at end index is excluded in the output.
1.
{{myArray | slice:3:6}} 
Output
44,55,66 
2.
{{myArray | slice:2:-4}} 
Output
33,44 
3.
{{myArray | slice:5}} 
Output
66,77,88 
4.
{{myArray | slice:-5}} 
Output
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];
} 
Find the output.
Array Example
44,55,66
33,44
66,77,88
44,55,66,77,88
    33
    44
    55 
Look into the code.
<li *ngFor="let num of myArray | slice:2:5">
  {{num}}
</li> 
Here ngFor will work on the elements of the subset obtained from
myArray | slice:2:5 
That is [33,44,55]

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 { } 
app.module.ts
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.
Angular Slice Pipe Example

Reference

Angular SlicePipe

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI








©2020 concretepage.com | Privacy Policy | Contact Us