Angular 2 two-way binding for a complex type for custom component

I'm trying to create a paging component, so that in my lists I won't need to repeat a lot of code. I'm also using Angular 2 in ES5 flavor. Thus here's my code:

app.pagingComponent = ng.core.Component({
templateUrl: '/pathToPagingHtml',
selector: 'paging',
inputs: ['listParameters']
}).Class({
constructor: function() {
}
});


And here's how I use it:

<paging [listParameters]="listParameters"></paging>


And of course I'm about to improve it into two-way data binding (banana in the box syntax) as follow:

<paging [(listParameters)]="listParameters"></paging>


But as I change listParameters in the parent component, nothing changes inside the child component, which has an interplation syntax in the template HTML. Please note that listParameters is an object, not a simple property, and also I've

What can be wrong?

Update:

This is how it's used in other components, say for example, list of employees:

<table id='employeesList'>
<!-- showing the list here -->
</table>
<paging [(listOptions)]="listOptions"></paging>


listOptions has these properties: pageNumber, pageSize, sorts which is an array, and filters which is an array too.

Continue reading...