Our project utilizes the linting-config provided by AirBnB. There is a rule that stipulates class methods must utilize this or be declared as static. While this rule theoretically makes sense, it seems to present challenges within an angular context. Consider a component like this (Stackblitz):
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
template: '<p>{{doSomething("hello stack overflow")}}'
})
export class AppComponent {
doSomething(string: string): string {
return string.toLocaleUpperCase();
}
}
The linter would raise issues about doSomething not using this. One solution could be to make the function static to comply with the rule - but then it couldn't be used in the template.
One possible approach is to move doSomething out of AppComponent and into a separate service. However, this requires wrapping the static function in a non-static one again, which doesn't reduce complexity significantly. This becomes particularly problematic with tracking functions for trackBy in ngForOf, as they naturally don't utilize this and are exclusively used in templates, rendering them unsuitable for being static.
- Refer to Call static function from angular2 template
Is there an effective pattern for handling functions used in templates while adhering to this rule, or is it simply impractical for Angular?