Description and reproduction of the issue

It would be quite useful for bigger projects to ban the use of certain css classes. For example the rule should not pass when is-foo is used in any of the variants:

<my-component
   [class.is-foo]="isFoo"
   [name]="value">
</my-component>

<my-component
   [ngClass]="{ '__flex is-foo': isFoo }"
   [name]="value">
</my-component>

<my-component
   class="__flex is-foo"
   [name]="value">
</my-component>

The rule should cover all the static possibilities. If we agree on the configuration format, I could give it a go at implementing it :)

{
  rules: {
    '@angular-eslint/template/ban-css-class': [
      'error',
      {
         name: 'is-foo',
         newName: 'is-bar', // could be used by fixer
         message: 'Please use is-bar instead' // optional
      },
      // do we need regex option? 
     ],
  }
}

Alternatively, maybe a more generic ban-attr rule would be more useful? It could have a special handling for class attribute to cover the cases above.

Versions

# Please run `npx ng version` in your project and paste the full output here:

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest supported version of the packages and checked my ng version output per the instructions given here.