Pipe chaining in Angular - Mini Project: Build & Apply

Pipe chaining

📖 Scenario: You are building a simple Angular component to display a list of product names. You want to show the names in uppercase and then limit the displayed text to the first 10 characters for a clean look.

🎯 Goal: Create an Angular standalone component that uses pipe chaining to transform product names by first converting them to uppercase and then truncating them to 10 characters.

📋 What You'll Learn

Create a component with a list of product names

Add a configuration variable for the maximum length of the displayed name

Use pipe chaining in the template to first convert names to uppercase and then slice them to the maximum length

Complete the component with the necessary Angular standalone setup

💡 Why This Matters

🌍 Real World

Displaying and formatting lists of items is common in web apps, such as product catalogs or user lists. Pipe chaining helps transform data cleanly in the template.

💼 Career

Understanding Angular pipes and standalone components is essential for modern Angular development, improving code readability and maintainability.

1

DATA SETUP: Create the product list

Create a standalone Angular component named ProductListComponent with a property called products that is an array containing these exact strings: 'apple', 'banana', 'cherry', 'date', 'elderberry'.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: ``,
})
export class ProductListComponent {
  // Your code here
}

Need a hint?

Define a property products inside the component class and assign the array with the exact product names.

2

CONFIGURATION: Add maximum length variable

Inside the ProductListComponent class, add a property called maxLength and set it to the number 10.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: ``,
})
export class ProductListComponent {
  products = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
  // Your code here
}

Need a hint?

Add a number property maxLength inside the component class and assign it the value 10.

3

CORE LOGIC: Use pipe chaining in the template

In the component's template, use an *ngFor directive to loop over products. For each product, display the product name transformed by chaining the uppercase pipe followed by the slice pipe with arguments 0 and maxLength.

Angular

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    
  `,
})
export class ProductListComponent {
  products = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
  maxLength = 10;
}

Need a hint?

Use *ngFor="let product of products" on an <li> element and inside use {{ product | uppercase | slice:0:maxLength }} to chain the pipes.

4

COMPLETION: Finalize the standalone component setup

Ensure the ProductListComponent is a standalone component with the standalone: true property in the @Component decorator and that the template includes the product list with pipe chaining as before.

Angular

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

@Component({
  // Your code here
})
export class ProductListComponent {
  products = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
  maxLength = 10;
}

Need a hint?

Check that the @Component decorator includes standalone: true and the template contains the list with pipe chaining.