trackBy to prevent data list to scroll back at data renewing

Use case : a Page is displaying a data list from a Call Sequence in the pageDidEnter event. When you scroll down to select an element, you may display more data or modify the data concerning this element in a Modal page, for example. When you go back to the page, the Call Sequence is re-executed and data list shows again starting from the top of the list. You would like the list to stay at the previous element position and see the modification.

This is using the trackBy function of https://angular.io/api/core/TrackByFunction

You need :

In the pageDidEnter Page event, put a customAction component as parent of the Call Sequence with the following example code:

this.local.track_by = function userTrackBy(index, user) {
    return user.People.id;
}

this.local is a variable (track_by for example) present in the local TS scope of the page only (this.global or SetGlobal component is a global variable for the whole application. In theory, you can use one or the other).

return <expression> has to return a unique value (in this example, it is an arrau of People objects that contains a unique id key).

The Call Sequence response has to be stored in a global or local variable (SetGlobal component or SetLocal), data_list for example (with value set to parent.out in TS mode or bound with the Source picker).

The ForEach Directive is no more bound to the Call Sequence as a Source (listen(…) function in the Directive source property) but on the previously stored variable (data_list in this example).
Then, still in the Directive, you have to add in the Directive expression property, the following code:

trackBy:this.local.track_by

trackBy: Invocation of the Angular tracking feature that calls the custom function.

Here is a sample project that demonstrates it => trackby.car