Parameterized pipes in Angular - Mini Project: Build & Apply

Using Parameterized Pipes in Angular

📖 Scenario: You are building a simple Angular app that shows a list of product prices. You want to format these prices nicely using a custom pipe that can take a parameter to decide the currency symbol.

🎯 Goal: Create a custom Angular pipe called currencySymbol that formats a number with a currency symbol passed as a parameter. Then use this pipe in a component template to display product prices with different currency symbols.

📋 What You'll Learn

Create a custom pipe named currencySymbol that takes a number and a currency symbol string parameter

The pipe should return a string combining the currency symbol and the number with two decimals

Create a component with a list of product prices as numbers

Use the currencySymbol pipe in the component template with different currency symbols as parameters

💡 Why This Matters

🌍 Real World

Custom pipes with parameters are useful for formatting data dynamically in Angular apps, such as currencies, dates, or text transformations.

💼 Career

Understanding parameterized pipes helps you build reusable and flexible UI components, a common requirement in professional Angular development.

1

Set up product prices array

In the component TypeScript file, create a variable called prices and assign it the array [10, 20.5, 30, 40.99].

Angular

# Your code here
// Create the prices array

Hint

Use a simple array of numbers assigned to prices.

2

Create currency symbol parameter

Create a variable called currency and set it to the string '$' in the component TypeScript file.

Angular

prices = [10, 20.5, 30, 40.99];
// Create the currency variable
# Your code here

Hint

This variable will hold the currency symbol to pass to the pipe.

3

Implement the currencySymbol pipe

Create a custom pipe named currencySymbol that implements PipeTransform. It should have a transform method that takes a value: number and a symbol: string parameter. Return a string combining the symbol and the value formatted with two decimals using value.toFixed(2).

Angular

prices = [10, 20.5, 30, 40.99];
currency = '$';
// Create the currencySymbol pipe class
# Your code here

Hint

Use template strings to combine the symbol and formatted number.

4

Use the pipe in the component template

In the component template HTML, use an *ngFor to loop over prices. Display each price using the currencySymbol pipe with the currency variable as the parameter. For example: {{ price | currencySymbol:currency }}.

Angular

prices = [10, 20.5, 30, 40.99];
currency = '$';

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'currencySymbol'
})
export class CurrencySymbolPipe implements PipeTransform {
  transform(value: number, symbol: string): string {
    return `${symbol}${value.toFixed(2)}`;
  }
}



  

Hint

Use Angular's *ngFor directive and pipe syntax with parameter.

Practice

1. What is the main purpose of parameterized pipes in Angular?
{{ value | pipeName:param }}

easy

A. To define routes in the application

B. To customize how data is displayed by passing extra information

C. To handle HTTP requests

D. To create new components dynamically

Solution

1. Step 1: Understand what pipes do

   Pipes transform data in templates to display it differently.

2. Step 2: Recognize parameterized pipes

   Parameterized pipes accept extra values to customize the transformation.

3. Final Answer:

   To customize how data is displayed by passing extra information -> Option B

4. Quick Check:

   Parameterized pipes = customize display [OK]

Hint: Remember pipes change display; parameters customize it [OK]

Common Mistakes:

• Confusing pipes with components
• Thinking pipes handle logic like HTTP
• Mixing pipes with routing

2. Which of the following is the correct syntax to pass a parameter to a pipe named customPipe with parameter 5?

easy

A. {{ value | customPipe:5 }}

B. {{ value | customPipe(5) }}

C. {{ value | customPipe;5 }}

D. {{ value | customPipe->5 }}

Solution

1. Step 1: Recall Angular pipe parameter syntax

   Angular pipes use colon : to separate parameters.

2. Step 2: Check each option

   Only {{ value | customPipe:5 }} uses colon correctly: | customPipe:5.

3. Final Answer:

   {{ value | customPipe:5 }} -> Option A

4. Quick Check:

   Pipe parameters use colon : [OK]

Hint: Use colon : to pass parameters to pipes [OK]

Common Mistakes:

• Using parentheses instead of colon
• Using semicolon or arrow instead of colon
• Omitting the colon

3. Given the pipe usage {{ 1234.5678 | number:'1.2-2' }}, what will be the displayed output?

medium

A. 1234.56

B. 1234.5678

C. 1,234.57

D. 1,234.5678

Solution

1. Step 1: Understand the number pipe parameter

   The parameter '1.2-2' means minimum 1 digit before decimal, 2 minimum and 2 maximum digits after decimal.

2. Step 2: Format the number 1234.5678 accordingly

   The number is rounded to 2 decimal places and includes thousand separator: '1,234.57'.

3. Final Answer:

   1,234.57 -> Option C

4. Quick Check:

   number pipe rounds decimals as per parameter [OK]

Hint: Number pipe rounds decimals between min and max digits [OK]

Common Mistakes:

• Ignoring thousand separators
• Not rounding decimals
• Confusing min and max decimal digits

4. What is wrong with this pipe usage?
{{ today | date:'yyyy-mm-dd' }}
Assuming today is a valid Date object.

medium

A. The pipe must be used with parentheses

B. The pipe name should be uppercase 'Date'

C. Date pipe does not accept format strings

D. The format string uses lowercase 'mm' which shows minutes, not months

Solution

1. Step 1: Check date format string

   In Angular date pipe, 'mm' means minutes, 'MM' means months.

2. Step 2: Identify the error

   Using 'yyyy-mm-dd' will show minutes instead of months, causing wrong output.

3. Final Answer:

   The format string uses lowercase 'mm' which shows minutes, not months -> Option D

4. Quick Check:

   Date pipe format is case-sensitive [OK]

Hint: Use uppercase MM for months in date pipe format [OK]

Common Mistakes:

• Using lowercase mm for months
• Capitalizing pipe names incorrectly
• Adding parentheses to pipes

5. You want to create a custom pipe truncate that shortens a string to a given length passed as a parameter. Which of these pipe transform method signatures correctly supports a parameter for length?

hard

A. transform(value: string, length: number): string

B. transform(value: string): string

C. transform(length: number, value: string): string

D. transform(): string

Solution

1. Step 1: Recall pipe transform method signature

   The first argument is the value, followed by optional parameters.

2. Step 2: Check parameter order and types

   transform(value: string, length: number): string correctly has value first, then length parameter.

3. Final Answer:

   transform(value: string, length: number): string -> Option A

4. Quick Check:

   Pipe transform(value, params...) signature [OK]

Hint: First argument is value, next are parameters in transform() [OK]

Common Mistakes:

• Swapping parameter order
• Omitting parameters
• Using no parameters at all