What is Slice Pipe in Angular: Usage and Examples

The slice pipe in Angular extracts a section of an array or string and returns it as a new array or substring. It works like a simple cutter that takes a start index and an optional end index to select part of the data for display.

How It Works

The slice pipe in Angular works like a pair of scissors for arrays or strings. Imagine you have a long list of items or a long sentence, but you only want to show a part of it. The slice pipe lets you pick where to start and where to stop, then it cuts out that piece for you.

For example, if you have a list of fruits and you only want to show the first three, you tell the slice pipe to start at 0 and end at 3. It then returns a new list with just those three fruits. This is useful because it does not change the original list; it just shows a smaller part of it.

It works with two numbers: the start index (where to begin cutting) and an optional end index (where to stop). If you leave out the end, it takes everything from the start to the end of the list or string.

Example

This example shows how to use the slice pipe to display part of a list of names in an Angular template.

typescript

<!-- app.component.html -->
<ul>
  <li *ngFor="let name of names | slice:1:4">{{ name }}</li>
</ul>

<!-- app.component.ts -->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  names = ['Anna', 'Bob', 'Charlie', 'Diana', 'Evan'];
}

Output

<ul>
  <li>Bob</li>
  <li>Charlie</li>
  <li>Diana</li>
</ul>

When to Use

Use the slice pipe when you want to show only a part of a list or string without changing the original data. This is helpful for pagination, previews, or limiting content on the screen.

For example, if you have a long list of comments but want to show only the first few on a page, the slice pipe can easily cut the list to the desired size. It also works well for showing a preview of a long text by slicing the first few characters.

Key Points

• The slice pipe extracts parts of arrays or strings without modifying the original.
• It takes a start index and an optional end index to select the slice.
• Useful for pagination, previews, and limiting displayed data.
• Works directly in Angular templates for easy and clean code.

Key Takeaways

The slice pipe extracts a part of an array or string by start and end indexes.

It does not change the original data but returns a new sliced copy.

Use it to limit displayed items or text in Angular templates easily.

It helps with pagination, previews, and cleaner UI displays.