[Angular Reactivity Streamlined] Mapping reactive collections to reactive values with ng-observe #blog #angular #rxjs

post-viewer.component.ts

import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { OBSERVE, Observed, ObserveFn, OBSERVE_PROVIDER, toMappedValue } from "ng-observe";
import { map } from "rxjs/operators";

@Component({
  template: `
    <div class="posts">
      <app-nav icon="prev" [link]="prev.value" [disabled]="!prev.value"></app-nav>

      <div class="card mx-4">
        <div class="card-body">
          <router-outlet></router-outlet>
        </div>
      </div>

      <app-nav icon="next" [link]="next.value" [disabled]="!next.value"></app-nav>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  viewProviders: [OBSERVE_PROVIDER],
})
export class PostViewerComponent {
  prev: Observed<string>;

  next: Observed<string>;

  constructor(route: ActivatedRoute, @Inject(OBSERVE) observe: ObserveFn) {
    const count = route.data.pipe(map(data => data.postCount));
    const id = route.params.pipe(map(params => Number(params.id)));
    const state = observe({ count, id });

    this.prev = toMappedValue(state, ({ id }) => (id > 1 ? `../${id - 1}` : undefined));
    this.next = toMappedValue(state, ({ count, id }) => (id < count ? `../${id + 1}` : undefined));
  }
}