[no-call-expression] Add support for excluding specific attribute names

[maxfriedmann]

Description and reproduction of the issue
I am using a pattern which requires me to pass a factory function to an angular component:

@Directive({
  selector: "[loadingFn]",
  exportAs: "loadingFn",
  standalone: true
})
export class LoadingElementDirective implements OnInit {
  @Input()
  public loadingFn: () => Observable<unknown> | Promise<unknown>;

  @HostListener("click")
  public click() {
    this.setLoading(true);
    void from(this.loadingFn())
      .pipe(first())
      .subscribe(
        () => {
          this.setLoading(false);
        }
      );
  }
}

public slowAction() {
  return async (): Promise<void> => {
    // do something very slow
  };
}

<my-custom-component [loadingFn]="slowAction()" />

In this case it would be handy to exclude loadingFn because the passed function name is different in each call.

Versions

package	version
@angular-eslint/eslint-plugin-template	17.1.0
@angular-eslint/template-parser	17.1.0
@typescript-eslint/parser	6.12.0
ESLint	8.48.0
node	20.9.0

Angular CLI: 17.0.3
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.3
@angular-devkit/build-angular   17.0.3
@angular-devkit/core            17.0.3
@angular-devkit/schematics      17.0.3
@angular/cdk                    17.0.1
@angular/cli                    17.0.3
@angular/google-maps            17.0.1
@angular/material               17.0.1
@angular/pwa                    17.0.3
@angular/ssr                    17.0.3
@ngtools/webpack                17.0.3
@schematics/angular             17.0.0
ng-packagr                      17.0.2
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

• 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.

[json-derulo]

Why are you using a function which returns the Observable, instead of working with the Observable directly? With your pattern, for each change detection cycle, a new Observable will be created. Sounds like an antipattern to me.

[maxfriedmann]

I changed the example above and added parts of the directive's implementation. Its a function returning a function that returns an Observable/Promise. The function only gets called when clicking on the host element (<my-custom-component/>). That's the reason why I chose this weird construct.

[JamesHenry]

@maxfriedmann it might be helpful if you could share a minimal end to end example in a stackblitz?

[maxfriedmann]

@JamesHenry sure: https://stackblitz.com/edit/angular-kxrwgv

[JamesHenry]

@maxfriedmann I think using an Observable using rxjs's defer would be preferable here:

https://stackblitz.com/edit/angular-rju8dt?file=src%2Fmain.ts

[maxfriedmann]

Thank you for taking the time. You're right, unfortunately this would require a massive migration in our source (around ~2300 places where [loadingFn] is currently used).

And, more important, that would not work with promises.

[JamesHenry]

In my example I am wrapping a Promise?

 protected slowAction$ = defer(() => from(YOUR_PROMISE_HERE));

[maxfriedmann]

Okay, I'll give this a try. Thank you for your time!

[JamesHenry]

Cool hope that's useful! For changes that don't make sense for everyone that uses angular-eslint, it's always possible to build your own lint rules using @angular-eslint/utils so that it also something you can explore if you want to enforce particular unique usage