SlicePipe
Creates a new Array
or String
containing a subset (slice) of the elements.
{{ value_expression | slice : start [ : end ] }}
NgModule
Input value
value | any |
a list or a string to be sliced. |
Parameters
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';
- }