Stable Pipe
What it does
Creates a new List or String containing a subset (slice) of the elements.
How to use
array_or_string_expression | slice:start[:end]
NgModule
CommonModuleDescription
Where the input expression is a List
or String
, and:
-
start
: The starting index of the subset to return.-
a positive integer: return the item at
start
index and all items after in the list or string expression. -
a negative integer: return the item at
start
index from the end and all items after in the list or string expression. - if positive and greater than the size of the expression: return an empty list or string.
- if negative and greater than the size of the expression: return entire list or string.
-
a positive integer: return the item at
-
end
: The ending index of the subset to return.- omitted: return all items until the end.
-
if positive: return all items before
end
index of the list or string. -
if negative: return all items before
end
index from the end of the list or string.
All behavior is based on the expected behavior of the JavaScript API Array.prototype.slice()
and String.prototype.slice()
.
When operating on a [List], the returned list 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'; }
exported from @angular/common/index defined in @angular/common/src/pipes/slice_pipe.ts
Please login to continue.