Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

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.