eslint/rules/angular-templates
Angular templates (.html files and inline templates): control flow, bindings, complexity. Screen-reader accessibility and @angular/localize are not used (simulators, Transloco): their rules are off, except what is odd anyway (autofocus, a positive tabindex).
43 rules, 31 on. Source: lint/eslint/rules/angular-templates.mjs.
| Rule | Setting | Files | What it checks | Why |
|---|---|---|---|---|
@angular-eslint/template/alt-text | off | HTML templates | [Accessibility] Enforces alternate text for elements which require the alt, aria-label, aria-labelledby attributes. | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/attributes-order | error | HTML templates | Ensures that HTML attributes and Angular bindings are sorted based on an expected order | — |
@angular-eslint/template/banana-in-box | error | HTML templates | Ensures that the two-way data binding syntax is correct | — |
@angular-eslint/template/button-has-type | error | HTML templates | Ensures that a button has a valid type specified | — |
@angular-eslint/template/click-events-have-key-events | off | HTML templates | [Accessibility] Ensures that the click event is accompanied with at least one key event keyup, keydown or keypress. | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/conditional-complexity | error | HTML templates | The conditional complexity should not exceed a rational limit | — |
@angular-eslint/template/cyclomatic-complexity | error | HTML templates | 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 | The count covers the whole template: past 5 branches, split into child components. |
@angular-eslint/template/elements-content | off | HTML templates | [Accessibility] Ensures that the heading, anchor and button elements have content in them | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/eqeqeq | error | HTML templates | Requires === and !== in place of == and != | — |
@angular-eslint/template/i18n | off | HTML templates | 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 | Off: the texts are translated with Transloco, not @angular/localize. |
@angular-eslint/template/interactive-supports-focus | off | HTML templates | [Accessibility] Ensures that elements with interactive handlers like (click) are focusable. | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/label-has-associated-control | off | HTML templates | [Accessibility] Ensures that a label element/component is associated with a form element | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/mouse-events-have-key-events | off | HTML templates | [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 | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/no-any | error | HTML templates | The use of "$any" nullifies the compile-time benefits of Angular's type system | — |
@angular-eslint/template/no-autofocus | warn | HTML templates | [Accessibility] Ensures that the autofocus attribute is not used | Warn: autofocus moves the focus without warning; justify it where the focus must start there. |
@angular-eslint/template/no-call-expression | off | HTML templates | Disallows calling expressions in templates, except for output handlers | Off: reading a signal is a call (count()); derived values belong in computed(). |
@angular-eslint/template/no-distracting-elements | error | HTML templates | [Accessibility] Enforces that no distracting elements are used | Kept despite its accessibility tag: forbids the obsolete <marquee> and <blink>. |
@angular-eslint/template/no-duplicate-attributes | error | HTML templates | Ensures that there are no duplicate input properties or output event listeners | — |
@angular-eslint/template/no-empty-control-flow | error | HTML templates | 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. | — |
@angular-eslint/template/no-inline-styles | error, {"allowBindToStyle":"dynamic"} | HTML templates | Disallows the use of inline styles in HTML templates | Custom: [style.x] only with a dynamic value (a constant belongs in a class); ngStyle is forbidden. |
@angular-eslint/template/no-interpolation-in-attributes | error | HTML templates | Ensures that property-binding is used instead of interpolation in attributes. | — |
@angular-eslint/template/no-negated-async | error | HTML templates | Ensures that async pipe results, as well as values used with the async pipe, are not negated | — |
@angular-eslint/template/no-nested-tags | error | HTML templates | Denies nesting of <p> and <a> tags. | — |
@angular-eslint/template/no-non-null-assertion | error | HTML templates | Disallows the non-null assertion operator (!) in templates | — |
@angular-eslint/template/no-outerhtml | error | HTML templates | Disallows using outerHTML on elements, which breaks change detection and detaches the element from the Angular view | — |
@angular-eslint/template/no-positive-tabindex | warn | HTML templates | Ensures that the tabindex attribute is not positive | Warn: a positive tabindex breaks the natural keyboard order; justify it where it is needed. |
@angular-eslint/template/prefer-at-else | error | HTML templates | Prefer using @else instead of a second @if with the opposite condition to reduce code and make it easier to read. | — |
@angular-eslint/template/prefer-at-empty | error | HTML templates | Prefer using @empty with @for loops instead of a separate @if or @else block to reduce code and make it easier to read. | — |
@angular-eslint/template/prefer-built-in-pipes | error | HTML templates | Encourages the use of Angular built-in pipes (e.g. lowercase, uppercase, titlecase) instead of certain JavaScript methods in Angular templates. | — |
@angular-eslint/template/prefer-class-binding | error | HTML templates | Suggests using [class] bindings over ngClass where applicable | — |
@angular-eslint/template/prefer-contextual-for-variables | error | HTML templates | Ensures that contextual variables are used in @for blocks where possible instead of aliasing them. | — |
@angular-eslint/template/prefer-control-flow | error | HTML templates | Ensures that the built-in control flow is used. | — |
@angular-eslint/template/prefer-ngsrc | error | HTML templates | Ensures ngSrc is used instead of src for img elements | — |
@angular-eslint/template/prefer-self-closing-tags | error | HTML templates | Ensures that self-closing tags are used for elements with a closing tag but no content. | — |
@angular-eslint/template/prefer-static-string-properties | error | HTML templates | Ensures that static string values use property assignment instead of property binding. | — |
@angular-eslint/template/prefer-style-binding | error | HTML templates | Suggests using [style] bindings over ngStyle where applicable | — |
@angular-eslint/template/prefer-template-literal | error | HTML templates | Ensure that template literals are used instead of concatenating strings or expressions. | — |
@angular-eslint/template/require-switch-default | error | HTML templates | Requires a @default block on every @switch to ensure all cases are handled. This is the template equivalent of the @typescript-eslint/switch-exhaustiveness-check rule. | — |
@angular-eslint/template/role-has-required-aria | off | HTML templates | [Accessibility] Ensures elements with ARIA roles have all required properties for that role. | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/table-scope | off | HTML templates | [Accessibility] Ensures that the scope attribute is only used on the <th> element | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
@angular-eslint/template/use-track-by-function | off | HTML templates | Ensures trackBy function is used | Off: @for requires track, and *ngFor is forbidden by prefer-control-flow. |
@angular-eslint/template/valid-aria | off | HTML templates | [Accessibility] Ensures that correct ARIA attributes and respective values are used | Off: screen-reader accessibility is not required (simulators, no assistive technology). |
local/kebab-case-path | error | HTML templates | Require kebab-case file and folder names. | Custom: kebab-case files and folders, like the TypeScript files (rules/file-names). |