angular/banana-in-box

Why

([ngModel])="name" is read as an event binding to an event called [ngModel], which never fires. The input shows no value and typing does not update the component, with no compile error to point at the cause.

Fix

Swap the brackets: [(ngModel)]="name" (the "banana in a box": parentheses inside square brackets). With a model() input on your own component the same syntax binds both ways: [(value)]="query".

Examples

<!-- bad -->
<input id="name" ([ngModel])="name">
<!-- good -->
<input id="name" [(ngModel)]="name">

Sources

• Angular, Two-way binding
• angular-eslint, template rule banana-in-box

Read it in the terminal

npx github:dawidolko/frontend-skills explain angular/banana-in-box