Skip to content
Related Articles

Related Articles

Improve Article
Angular10 SlicePipe
  • Last Updated : 29 May, 2021

In this article, we are going to see what is SlicePipe in Angular 10 and how to use it.

SlicePipe is used to create an array containing a slice of the element.

Syntax:

{{ value | SlicePipe }}

NgModule: Module used by SlicePipe is:

  • CommonModule

Approach: 



  • Create the angular app to be used
  • There is no need for any import for the SlicePipe to be used
  • In app.component.ts define the variables that takes the SlicePipe value.
  • In app.component.html use the above syntax with ‘|’ symbol to make SlicePipe element.
  • Serve the angular app using ng serve to see the output

Input value:

  • value: it takes a string value.

Parameters:

  • start: it takes a number value.
  • end: it takes a number value.

Example 1:

app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    collection: string[] = ['geeks', 'for', 'geeks', 'gfg'];
  }

 

 

app.component.html
<ul>
  <li *ngFor="let i of collection | slice:0:3">{{i}}</li>
</ul>

 



 

Output:

 

 

Example 2:

 

app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    collection: string[] = ['geeks', 'for', 'geeks', 'gfg'];
  }

 

 

app.component.html
<ol>
  <li *ngFor="let i of collection | slice:0:4">{{i}}</li>
</ol>

 

 

Output:

 

 

My Personal Notes arrow_drop_up
Previous
Next
Recommended Articles
Page :
Article Contributed By :
Vote for difficulty
Improved By :