ESLint Rules
Explore available ESLint rules for Angular and their properties. Find recommended rules, fixable rules, and accessibility presets.
Loading rules...
Explore available ESLint rules for Angular and their properties. Find recommended rules, fixable rules, and accessibility presets.
Use `host` metadata property instead of `@HostBinding` and `HostListener`.
Encourages the use of Angular built-in pipes (e.g. lowercase, uppercase, titlecase) instead of certain JavaScript methods in Angular templates.
Prefer using @else instead of a second @if with the opposite condition to reduce code and make it easier to read.
Ensures that control flow blocks are not empty. Empty control flow blocks usually occur due to refactoring that wasn't completed. They can cause confusion when reading code.
Disallow using code which is marked as developer preview
Warns user about unintentionally doing logic on the signal, rather than the signal's value.
Prefer using the `inject()` function over constructor parameter injection.
Ensures that keys in type decorators (Component, Directive, NgModule, Pipe) are sorted in a consistent order
Prefer using @empty with @for loops instead of a separate @if or @else block to reduce code and make it easier to read.
Use `OutputEmitterRef` instead of `@Output()`.
Ensure that template literals are used instead of concatenating strings or expressions.
Ensures that contextual variables are used in @for blocks where possible instead of aliasing them.
Ensures that lifecycle methods are defined on the object's prototype instead of on an instance.
Ensures that static string values use property assignment instead of property binding.
Use `readonly` signals instead of `@Input()`, `@ViewChild()` and other legacy decorators.
Ensures that $localize tagged messages can use runtime-loaded translations.
Ensures that metadata arrays do not contain duplicate entries.
Ensures consistent usage of `styles` / `styleUrls` / `styleUrl` within Component metadata
Ensures Components, Directives and Pipes do not opt out of standalone.
Angular Lifecycle methods should not be async. Angular does not wait for async lifecycle but the code incorrectly suggests it does.
Ensures that lifecycle methods are declared in order of execution
Ensures that self-closing tags are used for elements with a closing tag but no content.
Ensures that property-binding is used instead of interpolation in attributes.
Disallows the use of inline styles in HTML templates
Ensures that there are no duplicate input properties or output event listeners
[Accessibility] Ensures that elements with interactive handlers like (click) are focusable.
[Accessibility] Ensures elements with ARIA roles have all required properties for that role.
Ensures that HTML attributes and Angular bindings are sorted based on an expected order
Requires === and !== in place of == and !=
[Accessibility] Ensures that a label element/component is associated with a form element
Ensures that lifecycle methods are used in a correct context
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.
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.
Enforces a maximum number of lines in inline template, styles and animations.
Component selectors should follow given naming rules. See more at https://angular.dev/style-guide#choosing-component-selectors.
Ensures that classes use contextual decorators in their body
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.
Directive selectors should follow given naming rules. See more at https://angular.dev/style-guide#choosing-directive-selectors.
Ensures that directives do not implement conflicting lifecycle interfaces.
Disallows declaring empty lifecycle methods
Ensures that input bindings, including aliases, are not named or prefixed by the configured disallowed prefixes
Ensures that input bindings are not aliased
Disallows usage of the `inputs` metadata property.
Ensures that output bindings, including aliases, are not named as standard DOM events.
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.
Ensures that output bindings are not aliased
Disallows usage of the `outputs` metadata property.
Disallows usage of the `queries` metadata property.
Ensures component's `changeDetection` is set to `ChangeDetectionStrategy.OnPush`.
Prefer to declare `@Output`, `OutputEmitterRef` and `OutputRef` as `readonly` since they are not supposed to be reassigned.
The ./ and ../ prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix.
Ensures that $localize tagged messages contain helpful metadata to aid with translations.
Disallows using ViewEncapsulation.None
Using the providedIn property makes Injectables tree-shakable
Ensures that classes implement lifecycle interfaces corresponding to the declared lifecycle methods. See more at https://angular.dev/style-guide#use-lifecycle-hook-interfaces
Ensures that Pipes implement PipeTransform interface
[Accessibility] Enforces alternate text for elements which require the alt, aria-label, aria-labelledby attributes.
Ensures that the two-way data binding syntax is correct
[Accessibility] Ensures that the click event is accompanied with at least one key event keyup, keydown or keypress.
The conditional complexity should not exceed a rational limit
Checks cyclomatic complexity against a specified limit. It is a quantitative measure of the number of linearly independent paths through a program's source code
[Accessibility] Ensures that the heading, anchor and button elements have content in them
Ensures following best practices for i18n. Checks for missing i18n attributes on elements and attributes containing texts. Can also check for texts without i18n attribute, elements that do not use custom ID (@@) feature and duplicate custom IDs
[Accessibility] Ensures that the mouse events mouseout and mouseover are accompanied by focus and blur events respectively. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. See more at https://www.w3.org/WAI/WCAG21/Understanding/keyboard
The use of "$any" nullifies the compile-time benefits of Angular's type system
[Accessibility] Ensures that the autofocus attribute is not used
Disallows calling expressions in templates, except for output handlers
[Accessibility] Enforces that no distracting elements are used
Ensures that async pipe results, as well as values used with the async pipe, are not negated
Ensures that the tabindex attribute is not positive
[Accessibility] Ensures that the scope attribute is only used on the <th> element
[Accessibility] Ensures that correct ARIA attributes and respective values are used