NgRx Auto-Entity
Primary version
Primary version
  • NgRx Auto-Entity
  • Getting Started
    • Installation
    • Quick Start
    • Use your State!
      • Enhancing your Facade
      • Simplify your Component
    • From Scratch
      • App Interfaces
      • App Reducer
      • App State Module
      • Entity Model
      • Entity State
      • Update App State
      • Entity Service
      • Update App Module
  • Advanced Topics
    • Advanced Usage
      • Paradigm Changes
        • Models
        • Services
        • Service Providers
      • Taking Control
        • Integrating Custom Effects
      • Building Your Entities
        • Entity Names
        • Sort Comparers
        • Data Transforms
      • Building Your Entity States
        • The buildState() function
        • The buildFeatureState() function
        • The IEntityState Interface
        • The Selector Map
      • Generic Actions
        • Actions Now
        • Reusable Generic Actions
        • Custom Criteria
        • Loading Actions
          • Loading Entities
          • Loading Pages
          • Loading Ranges
        • Optional Loading
        • CURD Actions
        • Utility Actions
      • Correlation
      • Common Selectors
        • Exporting Selectors
      • Extra Selectors
      • Custom Selectors
        • Adding to Facades
        • Using Custom Selectors
      • Custom Effects
        • Composing Actions
        • Workflows
    • Leveraging Facades
      • Preparing Facades
      • The Interface: Selections
        • Using Facade Selections
        • Simplifying Further
      • The Interface: Activities
        • Using Facade Activities
      • So Little Code!
    • Utility Functions
      • Prototyping your Entities
        • Entity Making Performance
      • Entity Name Utilities
      • Entity Key Utilities
      • Entity Comparers
  • Examples
    • Sample Application
      • App Module
      • State
      • Models
      • Services
      • Facades
      • Container Components
      • Presentation Components
      • Modal Component
  • Documentation
    • Reference
  • Extras
    • Github Link
Powered by GitBook
On this page
Export as PDF
  1. Examples
  2. Sample Application

Facades

Business Central

Customer Facade

import { Injectable } from '@angular/core';
import { store } from '@ngrx/store';

import { CustomerEditComponent } from 'components';
import { Customer } from 'models';
import { AppState, CustomerFacadeBase, firstCustomer } from 'state'

@Injectable({ providedIn: 'root' })
export class CustomerFacade extends CustomerFacadeBase {
    constructor(store: Store<AppState>, private modal: Modal) {
        super(Customer, store);
    }
    
    get first$(): Observable<Customer> {
        return this.store.select(firstCustomer);
    }
    
    get currentOrFirst$(): Observable<Customer> {
        return combineLatest(this.current$, this.first$).pipe(
            map(([current, first]) => current || first)
        );
    }
    
    save(customer: Customer): void {
        customer.id ? this.update(customer) : this.create(customer);
    }
}
import { Injectable } from '@angular/core';

import { CustomerEditComponent } from '../components';
import { Customer } from '../models';

@Injectable({ providedIn: 'root' })
export class CustomerUIFacade {
    constructor(private modals: Modal, private customerFacade: CustomerFacade) {
    }
    
    async edit(customer: Customer): Promise<void> {
        const modal = this.modals.show(CustomerEditComponent);
        const editedCustomer = await modal.dismissed();
        this.customerFacade.save(editedCustomer);
    }
}
import { Injectable } from '@angular/core';
import { store } from '@ngrx/store';

import { Order } from 'models';
import { AppState, OrderFacadeBase } from 'state'

@Injectable({ providedIn: 'root' })
export class OrderFacade extends OrderFacadeBase {
    constructor(store: Store<AppState>, private modal: Modal) {
        super(Order, store);
    }
    
    save(order: Order): void {
        order.id ? this.update(order) : this.create(order);
    }
}
import { Injectable } from '@angular/core';
import { store } from '@ngrx/store';

import { LineItem } from 'models';
import { AppState, LineItemFacadeBase } from 'state'

export const lineItemsByOrder = createSelector(
    allLineItems,
    (lineItems, {order}) => 
      lineItems.filter(lineItem => lineItem.orderId === order.id)
)

@Injectable({ providedIn: 'root' })
export class LineItemFacade extends LineItemFacadeBase {
    constructor(store: Store<AppState>, private modal: Modal) {
        super(LineItem, store);
    }
    
    byOrder$(order: Order): Observable<LineItem[]> {
        return this.store.select(lineItemsByOrder, {order})
    }
    
    deleteAllForOrder(order: Order): void {
        this.byOrder$(order).pipe(
            take(1),
            tap(lineItems => this.deleteMany(lineItems))
        ).subscribe();
    }
}
PreviousServicesNextContainer Components

Last updated 4 years ago