Pipes (Built-in & Custom)
5 questions found
What is a pipe in Angular and how do you use one in a template?
Beginner
A pipe transforms a value directly inside your template for display purposes, without needing to write that transformation logic inside your component class. You apply a pipe using the vertical bar symbol after a value in interpolation.
@Component({
selector: 'app-example',
template: `<p>{{ price | currency }}</p>`
})
export class ExampleComponent {
price = 19.99;
}
Real-world example
A product page displays a price value as a properly formatted currency amount directly in the template, using the built in currency pipe instead of manually formatting the number in the component class.
Common follow-ups: What are some other common built in pipes Angular provides besides currency?;Can you chain more than one pipe together on the same value?
Components & Templates;Internationalization (i18n) in Angular
What are some of the most commonly used built in Angular pipes?
Beginner
Angular provides several useful built in pipes, including date for formatting dates, uppercase and lowercase for changing text casing, currency and number for formatting numeric values, and json for displaying a value's raw JSON representation, often useful for debugging.
<p>{{ today | date:'shortDate' }}</p>
<p>{{ name | uppercase }}</p>
<p>{{ price | currency:'USD' }}</p>
<pre>{{ userObject | json }}</pre>
Real-world example
A dashboard formats a user's join date using the date pipe, displays their name in uppercase for a header, and shows their account balance using the currency pipe, all directly inside the template.
Common follow-ups: How would you customize the exact date format shown by the date pipe?;Why is the json pipe particularly useful during development and debugging?
Data Binding;Angular DevTools & Debugging
How would you create a custom pipe in Angular, such as one that truncates long text?
Intermediate
You create a class decorated with the Pipe decorator, specifying a name to use in templates, and implement a transform method that receives the input value and any arguments, returning the transformed result.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number = 50): string {
return value.length > limit ? value.substring(0, limit) + '...' : value;
}
}
// Used as: <p>{{ description | truncate:100 }}</p>
Real-world example
A blog listing page shows a shortened preview of each article's content using a custom truncate pipe, keeping the layout clean and consistent regardless of how long the original article text actually is.
Common follow-ups: How do you pass multiple arguments to a custom pipe?;What naming convention should a custom pipe follow to avoid conflicting with built in pipes?
Components & Templates;Angular Style Guide & Best Practices
What is the difference between a pure and an impure pipe in Angular, and when would you need an impure one?
Advanced
A pure pipe, the default type, only recalculates its output when its actual input value changes by reference, making it very efficient. An impure pipe recalculates on every single change detection cycle regardless of whether the input reference changed, which is sometimes necessary for pipes that need to react to changes inside an array or object without a new reference being created, though it can hurt performance if used carelessly.
@Pipe({ name: 'filterActive', pure: false })
export class FilterActivePipe implements PipeTransform {
transform(items: Item[]): Item[] {
return items.filter((item) => item.active);
}
}
// Recalculates every cycle, since the array reference itself might not change even when its contents do
Real-world example
A team debugging why a filtering pipe was not updating after items were mutated directly inside an array discovers the pipe needed to be marked impure, since the array reference itself never actually changed.
Common follow-ups: Why can overusing impure pipes hurt performance in a large application?;What is a better long term fix than marking a pipe impure, related to how the underlying data is updated?
Change Detection;Performance & Lazy Loading
How does the async pipe simplify working with observables directly in an Angular template?
Intermediate
The async pipe automatically subscribes to an observable or promise, displays its most recently emitted value, and automatically unsubscribes when the component is destroyed, saving you from manually managing subscriptions and reducing the risk of memory leaks from forgotten unsubscribe calls.
@Component({
selector: 'app-user-list',
template: `<ul><li *ngFor="let user of users$ | async">{{ user.name }}</li></ul>`
})
export class UserListComponent {
users$ = this.userService.getUsers();
}
Real-world example
A user list component displays data from an observable directly in its template using the async pipe, completely avoiding the need to manually subscribe and unsubscribe inside the component's TypeScript code.
Common follow-ups: What happens to the subscription created by the async pipe when the component is destroyed?;Can you use the async pipe more than once on the same observable within the same template?
RxJS & Observables;Lifecycle Hooks