This is not a question on how to do Angular bindings. It's not about ngModel
etc.
It's about a feature that I've just been educated on, seemingly working and quite nicely.
I've never heard of it and I can't confirm it in any documentation I've looked into.
I asked a question and got a few answers, one of which was spot-on and easy to implement.
Basically, it's about the two-way binding that works automagically without implementing ControlValueAccessor
nor manually mapping values to the model in the view component from the custom control component. I only had to put in an @Output
suffixed by Change in the custom component and banana-box in the view component and tada! it works.
custom.component.ts
@Input() value: string;
@Output() valueChange: EventEmitter<string>;
view.component.html
<app-custom [(value)]="model.someField"></app-custom>
<app-custom [(value)]="model.anotherField"></app-custom>
Where is this behavior documented? Is it some special case of ngModel
that I don't comprehend or just a nice feature not widely known?
I'm afraid that it's just a fluke and not something that's going to be supported in the future.
This behaviour is proper and documented in angular docs. it is not some "un official hack"
According to docs:
The official docs even gives an example of it
so rest assured it is not something which might be removed without any notice.
BUT
just an FYI if you plan on using[ngModel]
and(ngModelChange)
Two-way bindings (or bananabox) are quite common and a nifty little thing for those dumb/smart component patterns.
https://angular.io/guide/template-syntax#two-way-binding-
Don't worry, it's not going away