Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7

April 26, 2020 | Category : Angular

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...