Home  >  Angular 2

Angular 2 Slice Pipe Example

By Arvind Rai, December 25, 2016
On this page we will provide angular 2 slice pipe example. SlicePipe is angular CommonModule API. Slice pipe slices a given array or string into subset. We need to provide start and end index. SlicePipe uses slice keyword with pipe operator. 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 example step by step using typescript.

Software Used

Find the software used in our demo.
1. Angular 2.3.0
2. TypeScript 2.0.10
3. Node.js 4.6.0
4. NPM 3.10.8
5. Firefox 50.1.0

SlicePipe

SlicePipe is an angular Pipe API that belongs to CommonModule. 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, Module, Main and index.html using TypeScript


app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
	    <string-app> </string-app>  
 	    <array-app> </array-app>
          ` 
})
export class AppComponent { } 
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 { } 
main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule); 
index.html
<html>
  <head>
    <title>Angular 2 Demo</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('myApp').catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>
      <my-app>Please Wait...</my-app>
  </body>
</html> 

Run Application

Find the steps to run the example.
1. Install Node.js and NPM in the system if not already installed. Make sure that Node.js version must be 4.x.x or higher and NPM version must be 3.x.x or higher.
2. Download the source code using download link given below in the example.
3. Go to the root folder of the project using command prompt and run npm install command.
4. Now run npm start command.
5. Now run index.html file. Find the print screen of the output.
Angular 2 Slice Pipe Example

Reference

Angular 2 SlicePipe

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS
comments powered by Disqus







Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us