angular/aio/content/extended-diagnostics/NG8101.md
Joe Martin (Crowdstaffing) bf1294ba69 docs: apply suggestions from code review (#45325)
Apply editorial suggestions for peer review.

Co-authored-by: Tiffany Davis <88161089+TMDavisGoogle@users.noreply.github.com>

PR Close #45325
2022-04-08 19:36:30 +00:00

1.4 KiB

@name 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.

@reviewed 2022-02-28