What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular’s NG8111 warning means an event binding refers to a function without calling it. Change a binding such as (click)="onClick" to (click)="onClick()" so Angular invokes the handler when the event occurs. If the handler needs event details, pass $event, for example (keyup)="updateField($event)".
What NG8111 means
Angular event bindings contain a statement to run when an event fires. Writing a function’s name alone supplies a reference to that function; it does not invoke the function. As a result, the handler does not run when the event occurs. Angular’s NG8111 diagnostic reference describes this as an uninvoked function in an event binding.
How to fix NG8111 in a template
Call the handler by adding parentheses to its name in the binding:
Free tools Windows power users keep installed
One-click scans. No signup required.
<!-- Function reference: does not invoke the handler -->
<button (click)="onClick">Click me</button>
<!-- Function call: invokes the handler on click -->
<button (click)="onClick()">Click me</button>For an event that provides details the handler needs, pass Angular’s $event variable as an argument:
#1 Best Overall
<input (keyup)="updateField($event)">Angular’s event-listener guide documents event bindings such as click, keydown, and keyup, and explains how to use $event.
Why NG8111 may not appear
NG8111 is an Angular extended diagnostic. It is emitted only when strictTemplates is enabled. This check has no additional prerequisites. If the setting is off, the absence of NG8111 does not make a bare function reference an invocation.
Suppressing the diagnostic
You can suppress this specific warning in the Angular compiler configuration, but suppression does not call the function or fix the binding. The documented configuration is:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"uninvokedFunctionInEventBinding": "suppress"
}
}
}
}Use suppression only if you intentionally need to silence the diagnostic; when a handler should run on the event, invoke it in the binding instead. Configuration details are in Angular’s NG8111 reference.
Rank #3
Event bindings on a component host
Event bindings can be declared on a component host as well as in a template. Angular’s host elements guide says host event bindings behave like template bindings and recommends the component’s host property over @HostListener and @HostBinding, which it describes as existing for backwards compatibility. Apply the same basic check to a host binding: make sure the event statement invokes the intended handler rather than merely referring to it.
One separate event-binding behavior to know
NG8111 concerns whether a function is invoked. Separately, Angular’s Component API reference notes that an event-binding statement that evaluates to false causes Angular to call preventDefault() on the DOM event. That behavior is about the statement’s result, not a substitute for invoking a handler.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
