This diagnostic detects a backwards "banana-in-box" syntax for two-way bindings.
<user-viewer ([user])="loggedInUser" />
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:
<user-viewer [(user)]="loggedInUser" />
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.