TrackById example

[iErKy]

Hello, I'm trying to use the trackById directive in one of my angular components with a signal of type Array but even though I'm following the example which can be seen in the documentation I can't use it as expected, I get a syntax error even after importing the trackby-id-prop module. https://ngxtension.netlify.app/utilities/directives/trackby-id-prop/#trackbyid

Any help would be appreciated, thanks in advance.

[nartc]

@iErKy Hi, can you provide a stackblitz?

[iErKy]

Sure letme create one and reproduce It.

[iErKy]

Hello @nartc couldn't reproduce the problem I had precisely but I figure out what was happening, I share the stackblitz https://stackblitz.com/edit/angular-u33cxa?file=src%2Fapp.html.

The problem resided in that toSignal method can return Signal | undefined and the problem came from this undefined, because your trackById expect an Iterable, assigning an initial value to the signal fixed this.

I think it would be a nice approach to make trackById Directive to be as similar as the trackBy of Angular, which is just a TrackByFn.
I'm still curious though why I get this error highlight in Webstorm, even when it is already compiling, might be something related with the autocomplete, if I use the trackByProp directive I get autocomplete, but not with the trackById one.

Thanks for taking your time to answer.

[dmorosinotto]

Hi @iErKy I think that the problem you have is not due to trackById directive but the toSignal stictness.
Becouse even if you are using an observable that will immediately emit the array, in you use-case the toSignal(ob$) has type: ExampleItem[] | undefined and this will generate the error on trakById that need all items to have a prop named id the undefined will fail this and generate error.

To fix the error in your specific case you can do something like this (if you know that you have an Observable that immediately emit values like of([item1, item2])

const FAKEITEMS: ExampleItem[] =[
  { id: '1', name: 'item1' },
  { id: '2', name: 'item2' },
];

  $items = toSignal(
    of(FAKEITEMS), { requireSync: true } //<-- WITH THIS OPTIONS toSignal EXCLUDE THE undefined CASE
  ); //THIS WILL INFER Signal<ExampleItems[]> AND trackById WILL BE HAPPI AND WORKS

In other cases where you have an Observable that will emits first value async (like calling an http) you can fix the error passing an initialValue to toSignal(..)

  $items = toSignal(
    http.get<ExampleItems[]>("/some-api"), { initialValue: [] as ExampleItems[] } 
  ); //EVEN THIS WILL INFER Signal<ExampleItems[]> SO trackById MAY JUST WORKS ;-)

Let's me know if with this suggestion you can use trackById and fix you errors 😉

[iErKy]

Hello @dmorosinotto, that's exactly what i ended up finding out, and It fixed the problem with trackById problem.
Thanks for the help :)

[dmorosinotto]

You are welcome, happy that you solved the problem with trackById
Ps: the same issue/consideration is valid for trackByProp='NAME_OF_YOUR_KEYPROP' if you have and array of items that don't has 'id' prop 😉