Angular
Pipe
Created: 11 Jan 2026
Updated: 11 Jan 2026
Standalone vs Normal Pipes
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
| Feature | Normal Pipe (Legacy) | Standalone Pipe (Modern) |
| Declaration | Must be listed in an NgModule's declarations. | Declared with standalone: true in its own decorator. |
| Usage | Available to any component within the same module. | Must be explicitly imported by the component using it. |
| Boilerplate | High (requires an NgModule file). | Low (self-contained). |
| Lazy Loading | Part of a larger module bundle. | Can be tree-shaken and bundled individually. |
| Default | Default 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?
- Tree Shaking: If you have a
SharedModulewith 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. - Simplicity: You no longer need to jump between your pipe file and a module file to register it.
- 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