EsLint says "<button> should have content"

[PHuhn]

Describe the bug

I love lint. I've been using it in programming since the early 1990's.

EsLint recently underwent major changes. One change is moving away from the .eslintrc.json to eslint.config.js. EsLint is telling me how to improve and modernize my code that was created with Angular 4.3. One change is not my implementation, but a part of PrimeNG. In a small test reference application that I use to move to a new version, I have 22 of the following errors:

3:2 error <button> should have content @angular-eslint/template/elements-content

An example of the HTML that is causing the error is as follows:

<button (click)='clickMessage()' pButton type='button' label=' Info ' class='p-button-primary'></button>

What to do about removing the above error?

Environment

Windows 10 Pro @angular/core: 18.0.5 node: v20.11.0 typescript: 5.4.2 EsLint: "@eslint/eslintrc": "^3.1.0", "@eslint/js": "^9.6.0", "angular-eslint": "18.0.1", "eslint": "^9.3.0", "typescript-eslint": "8.0.0-alpha.20"

Reproducer

No response

Angular version

18.0.5

PrimeNG version

17.18.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

node: v20.11.0

Browser(s)

Chrome: 126.0.6478.63

Steps to reproduce the behavior

From terminal or command line ng lint

Expected behavior

no errors

[imaksp]

Hi, you need to update rule config to ignore this if label attribute or pButton is present.

[PHuhn]

I think that is a bad idea, because it affects all HTML, such as <span></span>.

Yesterday, my solution was as follows:

<button (click)='clickMessage()' pButton type='button' type='button' class='p-button-primary'>&nbsp; Info &nbsp;</button>

or

<button (click)='deleteItemClicked( rowData )' pButton type='button' class='p-button-danger' [disabled]='!editable'><i class='pi pi-trash'></i></button>

It appears that one doesn't have to use the label property.

[imaksp]

Hi, it doesn't affect all elements , it will still show error for empty span, as it does not have label attr , you can even add pButton in allowlist, you can find more about this rule here: https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/elements-content.md