Angular @Pipe Naming

ID

javascript.angular_naming_pipe

Severity

info

Remediation Complexity

trivial

Remediation Risk

medium

Remediation Effort

low

Resource

Naming Convention

Language

JavaScript

Tags

angular, framework, naming

Description

Reports an Angular @Pipe class whose name does not end in Pipe, or whose decorator’s name is not lowerCamelCase:

// Bad — class missing Pipe suffix.
@Pipe({ name: "formatDate" })
export class FormatDate { }                     // FLAW

// Bad — decorator name not camelCase.
@Pipe({ name: "format_date" })
export class FormatDatePipe { }                 // FLAW

// Good
@Pipe({ name: "formatDate" })
export class FormatDatePipe { }

Rationale

Pipes are referenced by their decorator name in templates: {{ value | pipeName }}. Two consistency rules make this safe:

  • The class name (used in TypeScript imports) ends in Pipe, so consumers can scan their imports and tell what each is.

  • The decorator name (used in templates) is lowerCamelCase, matching how every built-in Angular pipe is named (date, currency, keyvalue, slice, …​). A snake-case or kebab-case pipe name in a template won’t parse, but mixed casing inside a single project still confuses readers.

Remediation

Rename the class and / or the decorator name:

@Pipe({ name: "formatDate" })
export class FormatDatePipe { ... }

Notes

The decorator name is checked only when its value is a StringLiteral. Pipes whose name comes from an imported constant or a template-string interpolation are not checked statically.

References