Angular10 SlicePipe

Last Updated : 10 Apr, 2023

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:

Angular10 SlicePipe

taran910

Improve

Article Tags :

Angular10 SlicePipe

Similar Reads

Thank You!

What kind of Experience do you want to share?