no-duplicate-class

This rule disallows duplicate class names in class attributes in Angular template files.

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/no-duplicate-class": "error",
    },
  },
];

Rule Details

This rule enforces unique class names in static class attribute values.

Note: Dynamic class bindings are ignored:

1. [class]="expr" — property binding, value is an expression
2. [class.active]="isActive" — class binding, value is an expression

This rule is auto-fixable using the --fix option.

Examples

Examples of incorrect code for this rule:

<!-- Duplicate class names -->
<div class="foo foo"></div>
<span class="foo bar foo"></span>

Examples of correct code for this rule:

<!-- Unique class names -->
<div class="foo bar"></div>
<span class="foo bar baz"></span>

<!-- Dynamic binding — skipped -->
<div [class]="classExpr"></div>
<div [class.active]="isActive"></div>

When Not To Use It

If you don't care about duplicate class names in Angular templates, you can disable this rule.

Further Reading

1. Angular Template Syntax
2. Angular Class Binding