Is there a way to lint .html files in Angular using a custom EsLint plugin?

I would like to create a custom linting rule for HTML files inside and Angular2+ project that warns me when there is a clickable element without an ID set. By clickable element I mean and other custom Angular components which will have a click event.

The project is currently using EsLint and I am trying to create a custom plugin which would do the job.

Right now I tried to run this rule from a plugin that enforces to have a class called "btn" at least. But linting does trigger any warning, more than that, it seems like it does not lint .html files at all.

module.exports = {
  meta: {
    docs: {
      description: '',
      category: 'Possible Errors',
      recommended: true,
    },
    fixable: null,
  },

  create: function (context) {
    return {
      JSXOpeningElement: (node) => {
        const nodeType = node.name.name;
        if (nodeType !== 'button') {
          return;
        }

        const legalClassNameAttributes = node.attributes.filter((attr) => {
          const isClassName = attr.type === 'JSXAttribute' && attr.name.name === 'className';

          return isClassName && (attr.value.type !== 'Literal' || 
attr.value.value.includes('btn'));
        });

        if (!legalClassNameAttributes.length) {
          context.report({
            message:
              'Use correct class',
            node,
          });
        }
      },
   };
  },
};