NG8101: Invalid Banana-in-Box
Description
This diagnostic detects a backwards "banana-in-box" syntax for two-way bindings.
<div ([var])="otherVar"></div>
What's wrong with that?
As it stands, ([var])
is actually an event binding with the name [var]
. The author likely intended this as a two-way binding to a variable named var
but, as written, this binding has no effect.
What should I do instead?
Fix the typo. As the name suggests, the banana (
should go inside the box []
. In this case:
<div [(var)]="otherVar"></div>
Configuration requirements
strictTemplates
must be enabled for any extended diagnostic to emit. invalidBananaInBox
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": { "invalidBananaInBox": "suppress" } } } }
See extended diagnostic configuration for more info.
© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v13.angular.io/extended-diagnostics/NG8101