Here should live all custom Angular lint rules that eslint does not already provide.
Wrong code is yellow/red underlined in VScode, it can also be raised running : npm run lint
Autofixing lint issues with : npm run lint:fix
TypeScript rule that enforces booleanAttribute transform on boolean inputs
{
"files": ["**/*.ts"],
"rules": {
"@yoo-digital/eslint-plugin-angular/boolean-input": "error"
}
}booleanAttribute @angular/core
BooleanInput @angular/cdk/coercion
isVegan = input<boolean>();
// Lint issue, must become :
isVegan = input<boolean, BooleanInput>(true|false, { transform: booleanAttribute });@Input() isVegan?: boolean;
// Lint issue, must become :
@Input({ transform: booleanAttribute }) isVegan: boolean = true|false;Should be avoided as it might be in conflict with boolean-attribute-shorthand
isVegan = input.required<boolean, BooleanInput>({
transform: booleanAttribute,
});<!-- This will not work : -->
<!-- True value -->
<mealComponent isVegan />
<!-- False value -->
<mealComponent />
<!-- Values must be set, which does not respect boolean-attribute-shorthand : -->
<!-- True value -->
<mealComponent [isVegan]="true" />
<!-- False value -->
<mealComponent [isVegan]="false" />HTML rule that enforces shorthand syntax for [attr]="true" bindings
{
"files": ["**/*.html"],
"rules": {
"@yoo-digital/eslint-plugin-angular/boolean-attribute-shorthand": "error"
}
}<mealComponent [isVegan]="true" />
<!-- Lint issue, must become : -->
<mealComponent isVegan /><mealComponent [isVegan]="false" />
<!-- No lint issue, to be able to address false value for a default true input -->If boolean input is by default true
// Modern signal way :
isVegan = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
// Old decorator way :
@Input({ transform: booleanAttribute }) isVegan: boolean = true;HTML set it true or false this way :
<!-- True value -->
<mealComponent />
<!-- False value -->
<mealComponent [isVegan]="false" />If boolean input is by default false
// Modern signal way :
isVegan = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
// Old decorator way :
@Input({ transform: booleanAttribute }) isVegan: boolean = false;HTML set it true or false this way :
<!-- True value -->
<mealComponent isVegan />
<!-- False value -->
<mealComponent />Those will raise no lint issues :
<mealComponent [isVegan]="myProperty" />
<mealComponent [isVegan]="2+2===4" />