require-attrs

This rule enforces the use of elements with specified attributes in Angular templates.

How to use

// eslint.config.js (flat config)
import angularTemplate from "@html-eslint/eslint-plugin-angular-template";
import templateParser from "@angular-eslint/template-parser";

export default [
  {
    files: ["**/*.html"],
    languageOptions: {
      parser: templateParser,
    },
    plugins: {
      "@html-eslint/angular-template": angularTemplate,
    },
    rules: {
      "@html-eslint/angular-template/require-attrs": [
        "error",
        { tag: "img", attr: "alt" },
      ],
    },
  },
];

Rule Details

This rule requires specified attributes to be present on matching elements. Custom elements (names containing -) are ignored. Angular property bindings (e.g., [attr]="expr") are treated as satisfying the presence check.

Note: Auto-fix is not supported for Angular templates.

Options

This rule takes an array of option objects:

1. tag (string, required): the HTML tag name to check.
2. attr (string, required): the attribute name that must be present.
3. value (string, optional): if specified, the attribute must have this exact value.
4. message (string, optional): custom error message.
5. conditions (array, optional): conditions that must all be true before the attribute is enforced.

Examples of incorrect code for this rule:

<img />
<svg></svg>

Examples of correct code for this rule:

<img alt="" />
<svg viewBox="0 0 100 100"></svg>