Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

SlicePipe

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

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

Exported from

Input value

value string | readonly T[]

Parameters

start number
end number

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'];
}
    

produces the following:

      
      <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';
}