Avoid Banana In A Box in primeng listbox component

Question

I'm using primeng listbox component, and want to avoid banana in a box 2 way data binding, as it's not recommended. html side gives this:

<p-listbox [options]="cities1" [(ngModel)]="selectedCity"></p-listbox>

and TS side only the declaration of selectedCity for now:

selectedCity: City;

and City is an interface:

export Interface City {
   id: string;
   name: string;
   continent: string;
}

And by avoiding BIAB => have an input to my listbox component, so I can pass the selected city as a parameter, and an output to emit when selection done.

Answer 1

In AngularJS, too many two-way bindings can hinder performance as it can create too many watchers.

However, in Angular, two-way bindings is simply a syntactic sugar of applying both property binding and event binding.

So, you don't really have to avoid two-way binding in Angular.

See https://angular.io/guide/template-syntax#two-way-binding--- for more info.