edit-customer.component.ts

@Component({
  selector: 'eternal-edit-customer',
  template: ` <eternal-customer
    *ngIf="customer$ | async as customer"
    [customer]="customer"
    (save)="this.submit($event)"
    (remove)="this.remove($event)"
  ></eternal-customer>`,
})
export class EditCustomerComponent implements OnInit {
  customer$: Observable<Customer> | undefined;

  constructor(private store: Store, private route: ActivatedRoute) {}

  ngOnInit() {
    this.customer$ = this.store
      .select(
        fromCustomer.selectById(Number(this.route.snapshot.params.id || ''))
      )
      .pipe(
        map((customer) => {
          return { ...customer };
        })
      );
  }

  submit(customer: Customer) {
    this.store.dispatch(
      CustomerActions.update({ customer })
    );
  }

  remove(customer: Customer) {
    this.store.dispatch(
      CustomerActions.remove({ customer })
    );
  }
}