slice pipe
This is the documentation for Angular 6.
You can switch to the latest version Angular 10.
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
- b
- c
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 ''