In the tutorial, we show how to work with Angular impure built-in SlicePipe to create a new Array or String containing a subset of the elements.
Related posts:
– Angular Built-in KeyValue Pipe
– Angular Built-in DatePipe
– Angular Custom Pipe | Pure Pipe + Impure Pipe
– Angular 6 Service – with Observable Data for Asynchronous Operation
Related pages:
Angular SlicePipe
Syntax:
{{ value_expression | slice : start [ : end ] }}
– value: an Array or a String.
– start (number): the starting index of the returned subset ->
- if a positive integer -> return the item at
startindex and all items after in the list or string expression. In casestartis greater than the size of the expression -> an empty list or string is returned - if a negative integer -> return the item at
startindex from the end and all items after in the list or string expression. In casestartis greater than the size of the expression -> an empty list or string is returned
– end (number): the ending index of the returned subset ->
- omitted -> all items until the end will be returned
- if positive -> all items before end index will be returned
- if negative -> all items before end index from the end will be returned
Practice
SlicePipe with Array and String Example
We create a slice-pipe component as below:
– slice-pipe.component.ts ->
1 2 3 4 5 6 7 8 9 10 | import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-slice-pipe', templateUrl: './slice-pipe.component.html' }) export class SlicePipeComponent { array: string[] = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']; str: string = 'qwertyuopasdfghjkl'; } |
– slice-pipe.component.html ->
1 2 3 4 5 6 7 8 9 10 11 12 13 | <h3>SlicePipe Array</h3> <ul> <li *ngFor="let i of array | slice:2:5">{{i}}</li> </ul> <h3>SlicePipe String</h3> String's value: <strong>{{str}}</strong> <p>slice [0:6]: '{{str | slice:0:6}}'</p> <p>slice [6:1]: '{{str | slice:6:1}}' (start > end)</p> <p>slice [-1]: '{{str | slice:-1}}'</p> <p>slice [-5]: '{{str | slice:-5}}'</p> <p>slice [-5:-2]: '{{str | slice:-5:-2}}'</p> <p>slice [-50]: '{{str | slice:-50}}' (-start < -string.length)</p> <p>slice [50]: '{{str | slice:50}}' (start > string.length)</p> |
Result
SourceCode
– Project structure ->
– SourceCode ->