{ "id": "api/common/SlicePipe", "title": "SlicePipe", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

SlicePipelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

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

NgModulelink

\n\n\n\n\n \n

Input valuelink

\n \n \n \n \n \n \n \n \n \n
\n \n value\n string | readonly T[]\n \n \n
\n \n \n

Parameterslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n start\n number\n \n \n
\n \n end\n number\n

Optional. Default is undefined.

\n \n
\n \n
\n\n\n \n\n \n\n\n \n
\n

Usage noteslink

\n

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

\n

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

\n

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

\n

List Examplelink

\n

This ngFor example:

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

produces the following:

\n\n<li>b</li>\n<li>c</li>\n\n

String Exampleslink

\n\n@Component({\n selector: 'slice-string-pipe',\n template: `<div>\n <p>{{str}}[0:4]: '{{str | slice:0:4}}' - output is expected to be 'abcd'</p>\n <p>{{str}}[4:0]: '{{str | slice:4:0}}' - output is expected to be ''</p>\n <p>{{str}}[-4]: '{{str | slice:-4}}' - output is expected to be 'ghij'</p>\n <p>{{str}}[-4:-2]: '{{str | slice:-4:-2}}' - output is expected to be 'gh'</p>\n <p>{{str}}[-100]: '{{str | slice:-100}}' - output is expected to be 'abcdefghij'</p>\n <p>{{str}}[100]: '{{str | slice:100}}' - output is expected to be ''</p>\n </div>`\n})\nexport class SlicePipeStringComponent {\n str: string = 'abcdefghij';\n}\n\n\n\n
\n\n\n\n
\n
\n\n\n" }