What is slice pipe?

The slice pipe is used to create a new Array or String containing a subset (slice) of the elements. The syntax looks like as below,

{{ value_expression | slice : start [ : end ] }}

For example, you can provide 'hello' list based on a greeting array,

@Component({
selector: 'list-pipe',
template: `<ul>
<li *ngFor="let i of greeting | slice: 0:5">{{ i }}</li>
</ul>`,
})
export class PipeListComponent {
greeting: string[] = ['h', 'e', 'l', 'l', 'o', 'm', 'o', 'r', 'n', 'i', 'n', 'g'];
}

July 12, 2022
320