Implement two-way data binding for custom property

Question

I see in primeng components the use something like ngModel (two-way data binding) style for some property like this

[(selection)]=\"selectedItem\";
<         


        

Answer 1

Angular docs

The two-way binding syntax is really just syntactic sugar for a property binding and an event binding. Angular desugars the binding into this:

To create two-way binding for property selection use:

@Input() selection;

// You have to follow this convention (For Output property)
// i.e.  like selectionChange

@Output() selectionChange:EventEmitter = new EventEmitter();

And to change selection in component as shown below:

changeSelection(newSelection)
{
    this.selection = newSelection;

    // emit change event to parent component
    this.selectionChange.emit(this.selection);  
}