Expert Angular

SlicePipe

SlicePipe is very similar to an array slice JavaScript function. Slice pipe extracts the characters from a string between two specified indices and returns the new sub string.

The general syntax to define a SlicePipe is as follows:

{{email_id | slice:0:4 }}

In the preceding code snippet, we are slicing the email address to show only the first four characters of the variable value, email_id.

Now that we know how to use a SlicePipe, let's put it together in a component.

The following is the complete code snippet implementing SlicePipe:

import { Component } from '@angular/core';@Component({ selector: 'slice-pipe', template: ` <h5>Built-In Slice Pipe</h5> <ol> <li> <strong>Original string</strong> <p> Email Id is {{ emailAddress ...