Skip to content
Related Articles

Related Articles

Angular10 SlicePipe

Improve Article
Save Article
  • Last Updated : 29 May, 2021
Improve Article
Save Article

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
Related Articles
Article Contributed By :
Vote for difficulty
Improved By :

Start Your Coding Journey Now!