new logo;

new helper: effect().

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 3.0.1
+New helper: `effect()` function.  
+Copy of `effect()` method of NgRx ComponentStore, where `takeUntil(this.destroy$)` is replaced with `takeUntilDestroyed(destroyRef)`, to use it as a function.
+
 ### 3.0.0
 Breaking changes:
 * Observable-based version removed;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-collection",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
   "author": {
     "name": "Evgeniy OZ",

projects/ngx-collection/README.md

@@ -303,7 +303,7 @@ The `item` parameter is the item that you are mutating.
 You receive this item from the items field of the collection state.
 
 ```ts
-  remove = this.effect<Example>(_ => _.pipe(
+  remove = effect<Example>(_ => _.pipe(
     exhaustMap((example) => {
       return this.examplesCollection.delete({
         request: example.uuId ? this.exampleService.removeExample(example.uuId) : signal(null),
@@ -319,7 +319,7 @@ You can send just a part of the item object, but this part should contain at lea
 See "Items comparison" for details.
 
 ```ts
-  remove = this.effect<string>(_ => _.pipe(
+  remove = effect<string>(_ => _.pipe(
     exhaustMap((uuId) => {
       return this.examplesCollection.delete({
         request: uuId ? this.exampleService.removeExample(uuId) : signal(null),
@@ -343,3 +343,44 @@ This library provides two Angular pipes to make it easier to use collection stat
 The `read()` method additionally supports a specific type from the request execution result, not just a list of items but a wrapper containing a list of items: `FetchedItems` type.   
 
 You can (optionally) use this or a similar structure to don't lose meta information, such as the total count of items (usually needed for pagination).
+
+## Helpers
+
+### getTrackByFieldFn()
+Returns a function you can use with "trackBy" in `ngFor`
+#### Parameters
+* `field: string` - field name
+
+Usage example:
+```angular2html
+<div *ngFor="let item of $items(); trackBy: coll.getTrackByFieldFn('uuId')"></div>
+```
+
+---
+
+### effect()
+Copy of `effect()` method of NgRx ComponentStore, where `takeUntil(this.destroy$)` is replaced with `takeUntilDestroyed(destroyRef)`, to use it as a function.  
+
+`effect()` is not a method of `Collection` class, it's a function.  
+
+You can find documentation and usage examples here: https://ngrx.io/guide/component-store/effect#effect-method  
+
+---
+
+### hasItemIn()
+Checks if some item belongs to some array of items - a comparator of this collection will be used.
+#### Parameters
+* `item`
+* `array`
+
+Example of usage:
+```angular2html
+<mat-chip-option
+    *ngFor="let role of $allRoles()" 
+    [value]="role"
+    [selected]="coll.hasItemIn(role, $roles())"
+    [selectable]="false"
+>
+<span>{{role.name}}</span>
+</mat-chip-option>
+```

projects/ngx-collection/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-collection",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MIT",
   "author": {
     "name": "Evgeniy OZ",
@@ -16,7 +16,7 @@
   ],
   "private": false,
   "peerDependencies": {
-    "@angular/core": "^16",
+    "@angular/core": "^16.1",
     "rxjs": "^7 || ^8"
   },
   "devDependencies": {

projects/ngx-collection/src/lib/effect.ts

@@ -0,0 +1,42 @@
+import { isObservable, Observable, of, Subject, Subscription } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DestroyRef, inject } from '@angular/core';
+
+/**
+ * This code is copied from NgRx ComponentStore (just a few lines edited to add `takeUntilDestroyed()`)
+ * Credits: NgRx Team
+ * https://ngrx.io/
+ * Source: https://github.com/ngrx/platform/blob/main/modules/component-store/src/component-store.ts#L382
+ * Docs:
+ * https://ngrx.io/guide/component-store/effect#effect-method
+ */
+export function effect<
+  ProvidedType = void,
+  OriginType extends | Observable<ProvidedType> | unknown = Observable<ProvidedType>,
+  ObservableType = OriginType extends Observable<infer A> ? A : never,
+  ReturnType = ProvidedType | ObservableType extends void
+    ? (
+      observableOrValue?: ObservableType | Observable<ObservableType>
+    ) => Subscription
+    : (
+      observableOrValue: ObservableType | Observable<ObservableType>
+    ) => Subscription
+>(generator: (origin$: OriginType) => Observable<unknown>): ReturnType {
+
+  const destroyRef = inject(DestroyRef);
+  const origin$ = new Subject<ObservableType>();
+  generator(origin$ as OriginType)
+  .pipe(takeUntilDestroyed(destroyRef))
+  .subscribe();
+
+  return ((
+    observableOrValue?: ObservableType | Observable<ObservableType>
+  ): Subscription => {
+    const observable$ = isObservable(observableOrValue)
+      ? observableOrValue
+      : of(observableOrValue);
+    return observable$.pipe(takeUntilDestroyed(destroyRef)).subscribe((value) => {
+      origin$.next(value as ObservableType);
+    });
+  }) as unknown as ReturnType;
+}

projects/ngx-collection/src/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './collection';
 export * from './comparator';
 export * from './status.pipes';
+export * from './effect';
 export type * from './types';