Standalone vs Normal Pipes

Lesson 16 of 22 2 min read Updated

The main difference between a Standalone Pipe and a Normal (NgModule-based) Pipe is how Angular manages their visibility and dependencies. In modern Angular (v17+), standalone is the recommended default.1

Key Differences at a Glance

FeatureNormal Pipe (Legacy)Standalone Pipe (Modern)
DeclarationMust be listed in an NgModule's declarations.Declared with standalone: true in its own decorator.
UsageAvailable to any component within the same module.Must be explicitly imported by the component using it.
BoilerplateHigh (requires an NgModule file).Low (self-contained).
Lazy LoadingPart of a larger module bundle.Can be tree-shaken and bundled individually.
DefaultDefault in Angular versions < 19.Default starting in Angular 19.

1. Normal Pipe (The NgModule Way)

In older versions of Angular, a pipe could not exist on its own. It had to "belong" to a module.2

The Pipe:

@Pipe({
name: 'normalPipe'
// standalone: false (implicitly or explicitly)
})
export class NormalPipe implements PipeTransform { ... }

The Module:

You must register it here, or the application won't recognize it.

@NgModule({
declarations: [NormalPipe], // <-- Mandatory registration
exports: [NormalPipe]
})
export class SharedModule { }

2. Standalone Pipe (The Modern Way)

A standalone pipe is self-governing. It doesn't need a module to "own" it.3

The Pipe:

@Pipe({
name: 'standalonePipe',
standalone: true // In Angular 19, this is true by default
})
export class StandalonePipe implements PipeTransform { ... }

The Usage:

Instead of importing a whole module, the component imports the pipe directly.4

@Component({
selector: 'app-my-comp',
standalone: true,
imports: [StandalonePipe], // <-- Import only what you need
template: `{{ data | standalonePipe }}`
})
export class MyComponent { ... }

Why Choose Standalone?

  1. Tree Shaking: If you have a SharedModule with 50 pipes but only use one, the browser still downloads all 50. With standalone pipes, the build tool only includes the specific pipe you actually use.
  2. Simplicity: You no longer need to jump between your pipe file and a module file to register it.
  3. Easier Testing: You can test the pipe in isolation without setting up a mock module environment.
Note: Starting with Angular 19, you don't even need to type standalone: true. 5All pipes, components, and directives are standalone by default