Models

Understand changes to model implementation

With NgRX Auto-Entity, a very small change must be made to how models are implemented. Standard @ngrx models are implemented as interfaces. A normal model used with @ngrx/entity may look like this:

src/app/models/customer.ts

export interface Customer {
    id: number;
    name: string;
}

This simple model would then be wired into @ngrx/entity using the adapter, with a selectId handler to allow entity framework to determine what the primary key of the entity is.

Dynamic Library

Due to the dynamic nature of how NgRX Auto-Entity works, interfaces are insufficient as they are compile-time only types in TypeScript. All of their information is ultimately stripped from the transpiled and optimized JavaScript code that you will ultimately release to a web server. To combat this issue, we must convert our entities to classes, which are a native runtime feature of JavaScript.

src/app/models/customer.ts

import {Entity, Key} from '@briebug/ngrx-auto-entity';

@Entity({
    modelName: 'Customer',
    uriName: 'customers'
})
export class Customer {
    @Key id: string;
    name: string;
}

Identifying Keys

In addition to converting our model from an interface to a class, notice that we have also imported Key from @briebug/ngrx-auto-entity and decorated our id property with @Key. This is how the Auto-Entity framework is able to determine which property of the model represents the primary key. As with @ngrx/entity, this key is used to organize and look up entities stored in state.

Composite Keys

Note that Auto-Entity supports composite keys. Simply decorate each property that participates in a primary key with the @Key decorator if necessary.

A simple but common example of a composite key might be something along the lines of an order line item, which references both an order and a product along with a quantity:

src/app/models/lineItem.ts

import {Key} from '@briebug/ngrx-auto-entity';

export class LineItem {
    @Key orderId: string;
    @Key productId: string;
    quantity: number;
}

For more detail about how composite keys work, read the advanced usage documentation on models and keys.

Entity Metadata

You should also notice that we have decorated our entity with the Entity decorator, imported from @briebug/ngrx-auto-entity. This decorator allows us to associate important metadata with each of our entities. Currently, the only required metadata is the modelName which allows us to define a minification/uglification-safe identifier for our entity models.

The Entity decorator allows the definition of other metadata for our entities, including alternative names for specific use cases, a sort comparer, data transformations, and other things. For more detail about entity metadata, read the advanced usage documentation on models.