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