What are Angular pipes — pure vs impure?
Answer
Angular pipes transform data for display. The critical performance distinction is between pure and impure pipes: Pure pipes (default): called only when Angular detects a pure change to the input value — a change to a primitive (string, number, boolean) or a change in object/array reference. Angular caches the result and reuses it until the input reference changes. Impure pipes: called on every change detection cycle — even if the input reference hasn't changed (e.g., if an element was added to an array without creating a new array). Declared with pure: false: @Pipe({ name: "myFilter", pure: false }). Why impure pipes are dangerous: if a pipe is impure and change detection runs 60 times/second during animations, the pipe is called 60 times/second. This can severely impact performance. The AsyncPipe is impure — it must be impure to react when an Observable emits a new value (the Observable reference doesn't change, but its emitted value does). When to use impure: only when you need the pipe to react to changes within a mutable reference (like adding to an array). Better alternative: use the OnPush strategy, work with immutable data (always create new arrays), and keep pipes pure. Custom pipe example: @Pipe({ name: "filterUsers", pure: false }) export class FilterUsersPipe implements PipeTransform { transform(users: User[], searchTerm: string): User[] { return users.filter(u => u.name.includes(searchTerm)); } } — impure because users array may be mutated. Better: use users$ | async | filterUsers:term where users$ emits a new array each time.
Previous
What is Angular content projection with ng-content?
Next
How does Angular handle memory leaks and subscription management?
More Angular Questions
View all →- Intermediate What is RxJS and how is it used in Angular?
- Intermediate What is the difference between switchMap, mergeMap, concatMap, and exhaustMap?
- Intermediate What is the difference between Subject, BehaviorSubject, ReplaySubject, and AsyncSubject?
- Intermediate What is the Angular NgRx state management library?
- Intermediate What is Angular lazy loading and preloading strategy?