In some cases, assigning facade properties to other properties on your component classes may itself be somewhat overly complex. There is not necessarily an explicit need to have observable properties on the component itself.

Light Weight Containers

For container components such as the above Customers component, there is nothing of particular note in the component itself that isn't simply replicating functionality we already have in the facade. We could simply expose the facade to the template by making it public in the constructor:

export class CustomersComponent {    
    constructor(public customers: CustomerFacade) {}
}

Facade in the Template

Then simply use the facade within the template, as it already provides all of the same exact functionality:

<div class="customers" *ngIf="customers.isLoading$ | async; else #loading">
    <app-customer-list 
        [customers]="customers.all$ | async" 
        (selected)="customers.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>

Note just how simple this container component is now that we have leveraged the full capabilities of a generated auto-entity facade! And note just how little code you really had to write.

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.

Observable Data Properties

Each entity facade exposes a number of properties that wrap NgRx state selections, exposing the streaming data within. Each of these properties returns and Observable of the appropriate type based on the state Auto-Entity tracks. The available properties on every entity facade include the following:

Familiar Functionality

All of these 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.customers$ = this.store.pipe(select(allCustomers));

This is in fact what all of the entity facade properties are doing for you. We simplify the above repetitive procedure so you may simply access a property rather than have to bring in the store, pipe and select yourself:

get all$(): Observable<TModel> {
    return this.store.pipe(select(selectAll));
}

Still Observable

Since all of our entity facade properties are observables, you are still free to use .pipe() on them as necessary, and leverage the full power of RxJs and reactive programming.

this.customers$ = this.customerFacade.all$.pipe(
    withLatestFrom(this.activatedRoute.paramMap),
    map(([customers, params]) => [customers, params.get('search')]),
    map(([customers, search]) => 
        customers.map(customer => customer.name.match(search))
    )
);

To use one of these properties in your component, simply inject your facade class and assign the property to a local observable:

export class CustomersComponent implements OnInit {
    customers$: Observable<Customer[]>;
    currentCustomer$: Observable<Customer>;
    isLoading$: Observable<boolean>;
    
    constructor(private customerFacade: CustomerFacade) {
    }
    
    ngOnInit(): void {
        this.customers$ = this.customerFacade.all$;
        this.customer$ = this.customerFacade.current$;
        this.isLoading$ = this.customerFacade.isLoading$;
        
        this.customerFacade.loadAll();
    }
    
    select(customer: Customer): void {
        this.customerFacade.select(customer);
    }
}

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