Hello Devs, 

In this tutorial, we will learn Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7

In this section, we will implement a angular slice pipe array example

Follow this step by step guide below. 


Syntax:

{{ value_expression | slice : start [ : end ] }}


Slice Pipe with Start Param:

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:

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:

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:

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


May this example help you.