eslint/rules/angular-components

Angular (angular-eslint): components, directives, pipes and services, every TypeScript rule listed, plus the TypeScript rules Angular code needs differently. Templates are in angular-templates.

59 rules, 49 on. Source: lint/eslint/rules/angular-components.mjs.

Rule	Setting	Files	What it checks	Why
@typescript-eslint/member-ordering	off	TS	—	Off: Angular fields initialise in order (inject() first), conflicting with its default order.
new-cap	warn, {"capIsNew":false}	TS	Require constructor names to begin with a capital letter	Custom: decorators are capitalised calls (`@Component()`), not constructors.
@typescript-eslint/naming-convention	warn, [{"selector":"default","format":["camelCase"],"leadingUnd…	TS	—	Custom: the shared naming, plus PascalCase readonly properties (an enum exposed to a template) and PascalCase stores (`export const UsersStore = signalStore(…)` is used like a class). Warn: external names (JSON keys, HTTP headers) keep their spelling.
@typescript-eslint/no-extraneous-class	warn, {"allowWithDecorator":true}	TS	—	Angular classes are decorated (@Component, @Injectable…).
@angular-eslint/component-class-suffix	warn	TS	Classes decorated with @Component must have suffix "Component" (or custom) in their name. Note: As of v20, this is no longer recommended by the Angular Team.	—
@angular-eslint/component-max-inline-declarations	info	TS	Enforces a maximum number of lines in inline template, styles and animations.	Small components may stay inline; past 3 lines, template and styles go to their own files.
@angular-eslint/component-selector	warn, {"type":"element","prefix":"app","style":"kebab-case"}	TS	Component selectors should follow given naming rules. See more at https://angular.dev/style-guide#choosing-component-selectors.	—
@angular-eslint/computed-must-return	error	TS	Ensures that computed() returns a value. Omitting the value is likely a mistake.	—
@angular-eslint/consistent-component-styles	error	TS	Ensures consistent usage of styles/styleUrls/styleUrl within Component metadata	—
@angular-eslint/contextual-decorator	error	TS	Ensures that classes use contextual decorators in their body	—
@angular-eslint/contextual-lifecycle	error	TS	Ensures that lifecycle methods are used in a correct context	—
@angular-eslint/directive-class-suffix	warn	TS	Classes decorated with @Directive must have suffix "Directive" (or custom) in their name. Note: As of v20, this is no longer recommended by the Angular Team.	—
@angular-eslint/directive-selector	warn, {"type":"attribute","prefix":"app","style":"camelCase"}	TS	Directive selectors should follow given naming rules. See more at https://angular.dev/style-guide#choosing-directive-selectors.	—
@angular-eslint/inject-at-top	error	TS	Requires inject() calls to be declared at the top of the class, before any other member	—
@angular-eslint/no-async-lifecycle-method	error	TS	Angular Lifecycle methods should not be async. Angular does not wait for async lifecycle but the code incorrectly suggests it does.	—
@angular-eslint/no-attribute-decorator	error	TS	The @Attribute decorator is used to obtain a single value for an attribute. This is a much less common use case than getting a stream of values (using @Input), so the @Attribute decorator is often mistakenly used when @Input is intended. This rule disallows the usage of @Attribute decorator entirely to prevent these mistakes.	—
@angular-eslint/no-developer-preview	warn	TS	Disallow using code which is marked as developer preview	Warn: a developer-preview API may be used knowingly; it may still change before it is stable.
@angular-eslint/no-duplicates-in-metadata-arrays	error	TS	Ensures that metadata arrays do not contain duplicate entries.	—
@angular-eslint/no-empty-lifecycle-method	info	TS	Disallows declaring empty lifecycle methods	—
@angular-eslint/no-experimental	error	TS	Disallow using code which is marked as experimental	—
@angular-eslint/no-forward-ref	warn	TS	Disallows usage of forwardRef references for DI	—
@angular-eslint/no-implicit-take-until-destroyed	error	TS	Ensures that takeUntilDestroyed() is called with an explicit DestroyRef when used outside of an injection context	—
@angular-eslint/no-input-prefix	off	TS	Ensures that input bindings, including aliases, are not named or prefixed by the configured disallowed prefixes	Off: no input prefix to forbid (the rule does nothing without a list).
@angular-eslint/no-input-rename	error	TS	Ensures that input bindings are not aliased	—
@angular-eslint/no-inputs-metadata-property	warn	TS	Disallows usage of the inputs metadata property	—
@angular-eslint/no-lifecycle-call	error	TS	Disallows explicit calls to lifecycle methods	—
@angular-eslint/no-output-native	error	TS	Ensures that output bindings, including aliases, are not named as standard DOM events	—
@angular-eslint/no-output-on-prefix	warn	TS	Ensures that output bindings, including aliases, are not named "on", nor prefixed with it. See more at https://angular.dev/guide/components/outputs#choosing-event-names	—
@angular-eslint/no-output-rename	error	TS	Ensures that output bindings are not aliased	—
@angular-eslint/no-outputs-metadata-property	warn	TS	Disallows usage of the outputs metadata property	—
@angular-eslint/no-pipe-impure	warn	TS	Disallows the declaration of impure pipes	—
@angular-eslint/no-queries-metadata-property	warn	TS	Disallows usage of the queries metadata property.	—
@angular-eslint/no-uncalled-signals	error	TS	Warns user about unintentionally doing logic on the signal, rather than the signal's value	—
@angular-eslint/pipe-prefix	off	TS	Enforce consistent prefix for pipes.	Off: pipe names are internal to the workspace; enable it in a library shared with other teams.
@angular-eslint/prefer-host-metadata-property	info	TS	Use host metadata property instead of @HostBinding and HostListener	—
@angular-eslint/prefer-inject	info	TS	Prefer using the inject() function over constructor parameter injection	—
@angular-eslint/prefer-on-push-component-change-detection	error, {"allowExplicitOnPush":false}	TS	Ensures components do not opt out of the default ChangeDetectionStrategy.OnPush change detection strategy	Custom: OnPush is the default since Angular 22, writing it is noise.
@angular-eslint/prefer-output-emitter-ref	info	TS	Use OutputEmitterRef instead of @Output()	—
@angular-eslint/prefer-output-readonly	info	TS	Prefer to declare @Output, OutputEmitterRef and OutputRef as readonly since they are not supposed to be reassigned	—
@angular-eslint/prefer-service-decorator	error	TS	Prefer the @Service() decorator over @Injectable({ providedIn: 'root' })	—
@angular-eslint/prefer-signal-model	error, {"useTypeChecking":true}	TS	Use model instead of input and output for two-way bindings	Custom: more accurate with type information (the typescript block enables it).
@angular-eslint/prefer-signals	error, {"useTypeChecking":true}	TS	Use readonly signals instead of @Input(), @ViewChild() and other legacy decorators	Custom: more accurate with type information (the typescript block enables it).
@angular-eslint/prefer-standalone	info	TS	Ensures Components, Directives and Pipes do not opt out of standalone.	—
@angular-eslint/reactive-context-must-read-signal	error, {"checkResources":true}	TS	Ensures that reactive contexts such as computed(), linkedSignal() and effect() read at least one reactive value (a signal). A reactive context with no reactive dependencies never re-runs, which is almost always a mistake.	—
@angular-eslint/relative-url-prefix	info	TS	The ./ and ../ prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix.	—
@angular-eslint/require-lifecycle-on-prototype	error	TS	Ensures that lifecycle methods are defined on the object's prototype instead of on an instance.	—
@angular-eslint/require-localize-metadata	off	TS	Ensures that $localize tagged messages contain helpful metadata to aid with translations.	Off: the texts are translated with Transloco, not @angular/localize.
@angular-eslint/runtime-localize	off	TS	Ensures that $localize tagged messages can use runtime-loaded translations.	Off: the texts are translated with Transloco, not @angular/localize.
@angular-eslint/sort-keys-in-type-decorator	error	TS	Ensures that keys in type decorators (Component, Directive, Injectable, NgModule, Pipe) are sorted in a consistent order	—
@angular-eslint/sort-lifecycle-methods	error	TS	Ensures that lifecycle methods are declared in order of execution	—
@angular-eslint/use-component-selector	warn	TS	Component selector must be declared	—
@angular-eslint/use-component-view-encapsulation	warn	TS	Disallows using ViewEncapsulation.None	—
@angular-eslint/use-injectable-provided-in	off	TS	Using the providedIn property makes Injectables tree-shakable	Off: root services use @Service (prefer-service-decorator); a bare @Injectable() is component-scoped.
@angular-eslint/use-lifecycle-interface	error	TS	Ensures that classes implement lifecycle interfaces corresponding to the declared lifecycle methods. See more at https://angular.dev/style-guide#use-lifecycle-hook-interfaces	—
@angular-eslint/use-pipe-transform-interface	error	TS	Ensures that Pipes implement PipeTransform interface	—
@typescript-eslint/no-unsafe-assignment	off	**/*.spec.ts	—	Off: Angular types fixture.nativeElement and debugElement as any.
@typescript-eslint/no-unsafe-call	off	**/*.spec.ts	—	—
@typescript-eslint/no-unsafe-member-access	off	**/*.spec.ts	—	—
@typescript-eslint/no-unsafe-type-assertion	off	**/*.spec.ts	—	—