feat(template): add DataSource support for rx-virtual-for directive #1764
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit b00b41d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 7 targetsSent with 💌 from NxCloud. |
|
hey @friendlyAce thanks a lot for your contribution! Will make a review over the weekend! |
| @@ -251,6 +255,21 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>> | |||
| this.observables$.next( | |||
| toObservable(potentialSignalOrObservable, { injector: this.injector }), | |||
| ); | |||
| } else if (this.isDataSource(potentialSignalOrObservable)) { | |||
There was a problem hiding this comment.
wouldn't it be potentialSignalOrObservableOrDataSource now? :)
| @@ -34,6 +34,17 @@ export interface ListRange { | |||
| end: number; | |||
| } | |||
|
|
|||
| export abstract class DataSource<T> { | |||
There was a problem hiding this comment.
do you know if it's possible to maybe have an import type { DataSource } from '@angular/cdk' without having it to mention as peerDependency?
That would be the absolute best case
| this._destroy$.pipe(take(1)).subscribe(() => { | ||
| potentialSignalOrObservable.disconnect(collectionViewer); | ||
| }); |
There was a problem hiding this comment.
i'm not a big fan of that. We should do the disconnect in ngOnDestroy.
| value !== null && | ||
| value !== undefined && |
There was a problem hiding this comment.
can't this be shortened with value != null?
Proposal
Link to feature request: #1765
Currently, the rx virtual for directive supports rendering from signal, observable and static iterables. This proposal aims to extends the functionality by adding support for the DataSource interface that is supported in the CdkVirtualForOf of the Angular CDK. The rx virtual for directive could directly connect to and disconnect from the given DataSource when needed.
This PR introduces support for DataSource in rx-virtual-for, aligning with Angular CDK's implementation while leveraging rx-angular's powerful reactive approach.
When users want to use their existing data source implementations they will need to implement the CollectionViewer interface at the component that uses rx virtual for and link the viewRange: ListRange output of that virtual for directive to their DataSource implementation for connecting and passing the returned Observable to rxVirtualFor and handle disconnecting from that data source when needed.
Key features:
Benefits:
Implementation details:
Documentation:
In addition to the implementation details mentioned above, I have declared the necessary types such as DataSource, CollectionViewer, and the isDataSource method within the rx-angular template package itself.
This approach eliminates the need for a (peer) dependency on Angular CDK, ensuring that rx-virtual-for remains self-contained and independent, similar how it was done with the ListRange interface.
Feedback, concerns, improvements are more than welcome
BR,
Vincent