From Get docs
< @angular/commonAngular/docs/10/api/common/slicepipe


pipe impure

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

Template:Value expression


Input value

value any


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:

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

produces the following:


String Examples

  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>
export class SlicePipeStringComponent {
  str: string = 'abcdefghij';

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.