<div class="customers">
  <div>
    <h2>Customer</h2>
    <app-customer-form 
      #customerForm
      [customer]="customerFacade.current$ | async" 
      (saved)="customerFacade.save($event)">
    </app-customer-form>
    <div>
      <button routerLink="/customers">Cancel</button>
      <button (click)="customerForm.save()" [disabled]="!customerForm.valid">
        Save
      </button>
    </div>
  </div>
</div>

<div class="customers">
  <div>
    <h2>Customer</h2>
    <app-customer-form
      #customerForm
      [customer]="customer$ | async"
      (saved)="onSave($event)">
    </app-customer-form>
    <div>
      <button routerLink="/customers">Cancel</button>
      <button (click)="customerForm.save()" [disabled]="!customerForm.valid">
        Save
      </button>
    </div>
  </div>
</div>

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.scss']
})
export class CustomerComponent implements OnInit {
  constructor(
    private activatedRoute: ActivatedRoute, 
    public customerFacade: CustomerFacade // No store, no selectors!
  ) {}

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      filter(params => params.has('id')),
      map(params => +params.get('id'))
    ).subscribe(id => {
        this.customerFacade.selectByKey(id); // Facades FTW!
        this.customerFacade.loadIfMissing(id); // Facades FTW!
    });
  }
}

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from 'state/app.state';
import { CustomerFacadeBase } from '../state/customer.state';
import { Customer } from '../models';

@Injectable({ providedIn: 'root' })
export class CustomerFacade extends CustomerFacadeBase {
    constructor(store: Store<AppState>) {
        super(Customer, store);
    }

    // TODO: Extend your facade's functionality here!
}

import { ActivatedRoute } from '@angular/router';
// ... other imports ...
import { CustomerFacade } from '../facades';
import { Customer } from '../models';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.scss']
})
export class CustomerComponent implements OnInit {
  customer$: Observable<Customer>;

  constructor(
    private activatedRoute: ActivatedRoute,
    private customerFacade: CustomerFacade // No store, no selectors!
  ) {}

  ngOnInit() {
    this.customer$ = this.activatedRoute.paramMap.pipe(
      filter(params => params.has('id')),
      map(params => +params.get('id')),
      tap(id => {
        this.customerFacade.selectByKey(id); // Facades FTW!
        this.hasCustomer(id)
          .pipe(first())
          .subscribe(exists => {
            if (!exists) {
              this.customerFacade.load(id); // Facades FTW!
            }
          });
      }),
      switchMap(() => this.customerFacade.current$) // Facades FTW!
    );
  }

  hasCustomer(id: number): Observable<boolean> {
    return this.customerFacade.ids$.pipe( // Facades FTW!
      map((ids: number[]) => ids.indexOf(id) > -1)
    );
  }

  onSave(customer: Customer): void {
    if (customer.id == null) {
      this.customerFacade.create(customer); // Facades FTW!
    } else {
      this.customerFacade.update(customer); // Facades FTW!
    }
  }
}