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
}

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
}

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;
}

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;
}

Hint

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

Practice

1. What does pipe chaining in Angular templates allow you to do?

easy

A. Create multiple services at once

B. Run multiple components in sequence

C. Bind multiple events to a single element

D. Apply multiple pipes one after another to transform data

Solution

1. Step 1: Understand what pipes do in Angular

   Pipes transform data in templates to change how it looks.

2. Step 2: Understand pipe chaining

   Pipe chaining means applying several pipes in a row, where each pipe uses the previous pipe's output.

3. Final Answer:

   Apply multiple pipes one after another to transform data -> Option D

4. Quick Check:

   Pipe chaining = multiple pipes applied in sequence [OK]

Hint: Remember pipes transform data; chaining applies many in order [OK]

Common Mistakes:

• Confusing pipes with components or services
• Thinking pipes run in parallel instead of sequence
• Believing pipe chaining changes event bindings

2. Which of the following is the correct syntax for chaining pipes in an Angular template?

easy

A. {{ value | pipe1 | pipe2 }}

B. {{ value | pipe1, pipe2 }}

C. {{ value | pipe1; pipe2 }}

D. {{ value | pipe1 & pipe2 }}

Solution

1. Step 1: Recall Angular pipe chaining syntax

   Angular uses the pipe symbol | to chain pipes in templates.

2. Step 2: Identify correct chaining format

   Multiple pipes are chained by repeating | pipeName after the value.

3. Final Answer:

   {{ value | pipe1 | pipe2 }} -> Option A

4. Quick Check:

   Pipe chaining uses multiple | symbols [OK]

Hint: Use multiple | symbols to chain pipes [OK]

Common Mistakes:

• Using commas or semicolons instead of pipe symbols
• Trying to chain pipes with & or other operators
• Missing the pipe symbol between pipes

3. Given the Angular template code:
{{ 'angular' | uppercase | slice:0:3 }}
What will be the displayed output?

medium

A. ANG

B. ang

C. ANGULAR

D. angul

Solution

1. Step 1: Apply the first pipe uppercase

   The string 'angular' becomes 'ANGULAR'.

2. Step 2: Apply the second pipe slice:0:3

   Slice takes characters from index 0 up to (but not including) 3, so 'ANG'.

3. Final Answer:

   ANG -> Option A

4. Quick Check:

   Uppercase then slice = 'ANG' [OK]

Hint: Apply pipes left to right, each uses previous output [OK]

Common Mistakes:

• Applying slice before uppercase
• Confusing slice end index as inclusive
• Expecting lowercase output

4. What is wrong with this Angular template expression?
{{ 123 | uppercase | slice:0:2 }}

medium

A. Numbers cannot be used with pipes

B. There is no error; this works fine

C. The uppercase pipe cannot be applied to a number

D. The slice pipe requires a string input

Solution

1. Step 1: Check the first pipe uppercase usage

   Angular's uppercase pipe coerces the input to a string first (123 becomes '123'), then applies toUpperCase(), resulting in '123'.

2. Step 2: Apply the second pipe slice:0:2

   On '123', slice from 0 to 2 gives '12'. No error occurs.

3. Final Answer:

   There is no error; this works fine -> Option B

4. Quick Check:

   Uppercase coerces number to string, then slice works [OK]

Hint: Angular pipes like uppercase coerce non-strings to string [OK]

Common Mistakes:

• Thinking uppercase strictly requires string input without coercion
• Believing numbers cause runtime errors in pipes
• Assuming slice would fail due to input type

5. You want to display a user's name in uppercase but only show the first 5 characters. Which pipe chaining expression correctly achieves this in Angular?

hard

A. {{ userName | uppercase, slice:0:5 }}

B. {{ userName | slice:0:5 | uppercase }}

C. {{ userName | uppercase | slice:0:5 }}

D. {{ userName | slice:5 | uppercase }}

Solution

1. Step 1: Understand the desired output

   The name should be fully uppercase, then only the first 5 characters shown.

2. Step 2: Determine correct pipe order

   First apply uppercase to convert all letters, then slice:0:5 to get first 5 characters.

3. Step 3: Check options for correct syntax and order

   {{ userName | uppercase | slice:0:5 }} applies uppercase first, then slice, which matches the requirement.

4. Final Answer:

   {{ userName | uppercase | slice:0:5 }} -> Option C

5. Quick Check:

   Uppercase then slice = correct order [OK]

Hint: Uppercase first, then slice to get correct output [OK]

Common Mistakes:

• Slicing before uppercase changes output
• Using commas instead of pipes
• Wrong slice parameters