slice pipe

This is the documentation for Angular 6.
You can switch to the latest version Angular 10.

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

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 Demo

Source

<ul>
  <li *ngFor="let i of collection | slice:1:3">{{i}}</li>
</ul>

export class AppComponent {
  collection: string[] = ['a', 'b', 'c', 'd'];
}

Result

String Demo

Source

<p>'{{str | slice:0:4}}' - output is expected to be 'abcd'</p>
<p>'{{str | slice:4:0}}' - output is expected to be ''</p>
<p>'{{str | slice:-4}}' - output is expected to be 'ghij'</p>
<p>'{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>
<p>'{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>
<p>'{{str | slice:100}}' - output is expected to be ''</p>

export class AppComponent {
  str = 'abcdefghij';
}

Result

'abcd' - output is expected to be 'abcd'

'' - output is expected to be ''

'ghij' - output is expected to be 'ghij'

'gh' - output is expected to be 'gh'

'abcdefghij' - output is expected to be 'abcdefghij'

'' - output is expected to be ''