Angular10 SlicePipe

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:

Filename: app.component.ts

javascript

import { Component } from '@angular/core';

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

Filename: app.component.html

html

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

Output:

Example 2:

Filename: app.component.ts

javascript

import { Component } from '@angular/core';

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

Filename: app.component.html

html

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

Output: