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

In your child component you have to implement two-way binding interface like this:

private _selection: any;
get selection(): any {
    return this._selection;
}
@Input()
set selection(value: any) {
    if(this._selection === value) {
        return;
    }
    this._selection = value;
    this.selectionChange.emit(this._selection);
}
@Output()
selectionChange = new EventEmitter();

It's mandatory to name @Output filed by adding propertyNameChange to @Input name. So you can use it in your parent component temlate like this: