Hi All,
Now, let's see post of angular 9/8/7 slice pipe example. This tutorial will give you simple example of angular slicepipe example. In this article, we will implement a angular slice pipe array example. you can understand a concept of angular slice pipe string example. Let's get started with angular slice pipe example.
In this tutorial i will provide you full example and how to use angular slice pipe with start and end parameter. you can use it in angular 6, angular 7, angular 8 and angular 9 application.
I am not going to explain more and more description but i will simply give you syntax and some small examples so you can easily use it in your application.
Syntax:
{{ value_expression | slice : start [ : end ] }}
start: You must have to pass start parameter as number. it will start from given number with string or array.
end: You is a optional parameter as number. it will end from given number with string or array.
Slice Pipe with Start Param
It will start from 2 key of the given array.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ myArray | slice: 2 }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
}
Output
2,3,4,5,6,7,8
Slice Pipe with Start and End Param
It will start from 2 key and end with 7 key of the given array.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ myArray | slice: 2:7 }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
}
Output
2,3,4,5,6
Slice Pipe with Start with Nagative
It will start from -2 key it means it will take key value from last end of array.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ myArray | slice: -2 }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
}
Output
7,8
Slice Pipe with Start and End with Nagative
It will start from 2 key and end with -3. it means it will take key value from last end of array.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ myArray | slice: 2:-3 }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
}
Output
2,3,4,5
Slice Pipe with Array
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<div *ngFor="let item of myArray | slice:2:6"> {{item}}</div>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8];
}
Output
2
3
4
5
Slice Pipe with String
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ myString | slice: 10:30 }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
myString = "This is Angular Slice Pipe Example";
}
Output
gular Slice Pipe Exa
I hope it can help you...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example