Functions should be invoked in event bindings.

This diagnostic detects uninvoked functions in event bindings.

      
import {Component, signal, Signal} from '@angular/core';
@Component({
  template: `<button (click)="onClick">Click me</button>`,
})
class MyComponent {
  onClick() {
    console.log('clicked');
  }
}
    

What's wrong with that?

Functions in event bindings should be invoked when the event is triggered. If the function is not invoked, it will not execute when the event is triggered.

What should I do instead?

Ensure to invoke the function when you use it in an event binding to execute the function when the event is triggered.

      
import {Component} from '@angular/core';
@Component({
  template: `<button (click)="onClick()">Click me</button>`,
})
class MyComponent {
  onClick() {
    console.log('clicked');
  }
}
    

Configuration requirements

strictTemplates must be enabled for any extended diagnostic to emit. uninvokedFunctionInEventBinding has no additional requirements beyond strictTemplates.

What if I can't avoid this?

This diagnostic can be disabled by editing the project's tsconfig.json file:

      
{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "uninvokedFunctionInEventBinding": "suppress"
      }
    }
  }
}
    

See extended diagnostic configuration for more info.