Prefabricated facades in NgRx Auto-Entity expose all the necessary properties and methods to allow you to fully leverage all of the state, actions and selectors Auto-Entity manages. Once you have extended a class from the base facade class, you may leverage all of this functionality without any additional effort.

Action Dispatching Methods

In addition to properties for each selection, entity facades also expose a number of methods that wrap NgRx action dispatch calls. Each of these methods handles creation and subsequent dispatch of the appropriate generic action, including handling all the type information. The available methods on every facade include:

Familiar Functionality

All of these methods, as with the properties, are encapsulating functionality you may already be familiar with. In the past with plain old NgRx, you might have done something like the following:

This is in fact what all of the entity facade methods are doing for you. We simplify the above repetitive procedure so you may simply call a method with just the bare bones required arguments, rather than have to bring in the store, dispatch and construct new actions yourself:

The model type is tracked when you extend the facade base class with your own concrete implementation:

To use one of these methods in your component, simply inject your facade class and call the method in the constructor, an ngOnInit or similar handler, or a custom handler:

export class CustomersComponent implements OnInit {    
    constructor(
        public customers: CustomerFacade, 
        public router: Router,
        public route: ActivatedRoute
    ) {
        this.customers.loadAll();
    }
    
    ngOnInit(): void {
        this.route.paramMap.pipe(
            filter(params => params.has('id')),
            map(params => params.get('id'))
        ).subscribe(id => this.customers.selectByKey(id));
    }
    
    select(customer: Customer): void {
        this.router.navigate(['./', customer.id]);
    }
}

Use the Async Pipe!

We highly recommend following NgRx best practices here to avoid subscribing directly to any observable on an entity facade. Instead, use the async pipe from Angular in your templates, and follow container/presenter model for your component architecture:

<div class="customers" *ngIf="customers.isLoading$ | async; else #loading">
    <app-customer-list 
        [customers]="customers.all$ | async" 
        (selected)="select($event)">
    </app-customer-list>
    <app-customer-detail 
        *ngIf="(customers.current$ | async) as customer"
        [customer]="customer">
    </app-customer-detail>
</div>
<ng-template #loading>
    Loading customers...
</ng-template>