armanozak

import { EMPTY, firstValueFrom } from "rxjs";

lastValueFrom(EMPTY).catch(console.log);
// (asynchronously) EmptyErrorImpl

armanozak

import { EMPTY } from "rxjs";

EMPTY.toPromise().then(console.log);
// (asynchronously) undefined

armanozak

import { interval, firstValueFrom, lastValueFrom } from "rxjs";
import { map, take } from "rxjs/operators";

const count1To5$ = interval(1000).pipe(
  take(5),
  map(i => i + 1)
);

firstValueFrom(count1To5$).then(console.log);
// (after ~1s) 1

armanozak

import { interval } from "rxjs";
import { map, take } from "rxjs/operators";

const count1To5$ = interval(1000).pipe(
  take(5),
  map(i => i + 1)
);

count1To5$.toPromise().then(console.log);
// (after ~5s) 5

armanozak

import { of } from "rxjs";
import { map, concatAll } from "rxjs/operators";

of(1, 2, 3)
  .pipe(
    map(id =>
      fromFetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
        selector: resp => resp.json()
      })
    ),

armanozak

import { Subject } from "rxjs";

const number$ = new Subject<number>();
number$.next();

// Error: An argument for 'value' was not provided.
// in RxJS 6 → No error

armanozak

import { of } from "rxjs";
import { filter } from "rxjs/operators";

// Observable<"" | 0 | null | undefined | Date>
of("" as const, 0 as const, null, undefined, new Date())
  .pipe(filter(Boolean))
  .subscribe();
// Observable<Date> (in RxJS 6 → Observable<unknown>)

armanozak

import { of } from "rxjs";
import { groupBy, map, mergeMap } from "rxjs/operators";

// Observable<string, number>
of(0, "A", 1, "B", 2, "C", 3, "D", 4, "E", 5, "F", 6, "G", 7, "H", 8, "I", 9, "...")
  .pipe(
    groupBy((x): x is number => typeof x === "number"),
    mergeMap(group$ => (group$.key === true ? group$.pipe(map(String)) : group$))
  )
  .subscribe();

armanozak

import { of } from "rxjs";

// Observable<string, number> (in RxJS 6 → No overload matches this call)
of(0, "A", 1, "B", 2, "C", 3, "D", 4, "E", 5, "F", 6, "G", 7, "H", 8, "I", 9, "...");

armanozak

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>