ngrx/data add new property to existing collection

Question

I'm currently using NgRx/data and I have 2 collections: Courses and Lessons.

I found something in their documentation to overwrite EntityCollectionReducer:

@Injectable()
export class AdditionalEntityCollectionReducerMethodsFactory {
  constructor(private entityDefinitionService: EntityDefinitionService) {}
  create<T>(entityName: string): EntityCollectionReducerMethodMap<T> {
    const definition = this.entityDefinitionService.getDefinition<T>(
      entityName
    );
    const methodsClass = new AdditionalEntityCollectionReducerMethods(
      entityName,
      definition
    );

    return methodsClass.methods;
  }
}

and in AdditionalEntityCollectionReducerMethods, I overwrote some methods to add the new property:

export class AdditionalEntityCollectionReducerMethods<T> extends EntityCollectionReducerMethods<T> {
  constructor(
    public entityName: string,
    public definition: EntityDefinition<T>
  ) {
    super(entityName, definition);
  }

  protected saveAddOne(collection: EntityCollection<T>, action: EntityAction<T>): EntityCollection<T> {
    const ec = super.saveAddOne(collection, action);
    (ec as any).saving = true;

    return ec;
  }

  protected saveAddOneSuccess(collection: EntityCollection<T>, action: EntityAction<T>): EntityCollection<T> {
    const ec = super.saveAddOneSuccess(collection, action);
    (ec as any).saving = false;

    return ec;
  }

  protected saveAddOneError(collection: EntityCollection<T>, action: EntityAction<EntityActionDataServiceError>): EntityCollection<T> {
    const ec = super.saveAddOneError(collection, action);
    (ec as any).saving = false;

    return ec;
  }
}

Also in course.module.ts I specified this property as additionalCollectionState in entityMedatata:

const entityMetadata: EntityMetadataMap = {
  Course: {
    ...
    additionalCollectionState: {
      saving: false,
    },
  }
  ...
};

The AdditionalEntityCollectionReducerMethods was registered in app.module.ts as provider:

{
   provide: EntityCollectionReducerMethodsFactory,
   useClass: AdditionalEntityCollectionReducerMethodsFactory,
},

So, in this way, I'm adding a new property called saving in the Courses collection. But my problem is that if I'm using the saveAddOne method in other modules, the saving property will be added also here and I don't want this.

I think this is happening because I've registered the AdditionalEntityCollectionReducerMethodsFactory in app.module, but I tried to register this in course.module and to debug, but the breakpoint is not hit there (only in app.module). I also have to mention that the course.module is lazyloaded.

Is there a possibility to add a new property in only one specific collection?

score 0 · Answer 1 · answered Jan 31 '23 at 02:00

Here is a simple way to do this

For in-depth: https://ngrx.io/guide/data/entity-metadata

export const appEntityMetadata: EntityMetadataMap = {
  Hero: {
    /* optional settings */
    filterFn: nameFilter,
    sortComparer: sortByName
  },
  Villain: {
    villainSelectId, // necessary if key is not `id`
 
    /* optional settings */
    entityName: 'Villain', // optional because same as map key
    filterFn: nameAndSayingFilter,
    entityDispatcherOptions: { optimisticAdd: true, optimisticUpdate: true }
  }
};

Register metadata:

EntityDataModule.forRoot({
  ...
  entityMetadata: appEntityMetadata,
  ...
})

ngrx/data add new property to existing collection

1 Answers1