Help Angular by taking a 1 minute survey!Go to surveyHome
API > @angular/common

SlicePipe

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

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

NgModule

Input value

value any

a list or a string to be sliced.

Parameters

start number

the starting index of the subset to return:

  • a positive integer: return the item at start index and all items after in the list or string expression.
  • a negative integer: return the item at start index from the end and all items after in the list or string expression.
  • if positive and greater than the size of the expression: return an empty list or string.
  • if negative and greater than the size of the expression: return entire list or string.
end number

the ending index of the subset to return:

  • omitted: return all items until the end.
  • if positive: return all items before end index of the list or string.
  • if negative: return all items before end index from the end of the list or string.

Optional. Default is undefined.

Usage notes

All behavior is based on the expected behavior of the JavaScript API Array.prototype.slice() and String.prototype.slice().

When operating on an Array, the returned Array is always a copy even when all the elements are being returned.

When operating on a blank value, the pipe returns the blank value.

List Example

This ngFor example:

@Component({ selector: 'slice-list-pipe', template: `<ul> <li *ngFor="let i of collection | slice:1:3">{{i}}</li> </ul>` }) export class SlicePipeListComponent { collection: string[] = ['a', 'b', 'c', 'd']; } 
      
      @Component({
  selector: 'slice-list-pipe',
  template: `<ul>
    <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
  </ul>`
})
export class SlicePipeListComponent {
  collection: string[] = ['a', 'b', 'c', 'd'];
}

produces the following:

<li>b</li> <li>c</li> 
      
      <li>b</li>
<li>c</li>

String Examples

@Component({ selector: 'slice-string-pipe', template: `<div> <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p> <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p> <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p> <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p> <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p> <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p> </div>` }) export class SlicePipeStringComponent { str: string = 'abcdefghij'; } 
      
      
  1. @Component({
  2.   selector: 'slice-string-pipe',
  3.   template: `<div>
  4.     <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
  5.     <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>
  6.     <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>
  7.     <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
  8.     <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
  9.     <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>
  10.   </div>`
  11. })
  12. export class SlicePipeStringComponent {
  13.   str: string = 'abcdefghij';
  14. }