How to use the rxjs.fromEvent function in rxjs

templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  hasArt = false;
  numberOfBackgrounds = 16;
  movingBg$ = new Subject().pipe(startWith(true));

  backgroundArr = randommizeArrayOrder(
    Array.from(
      { length: this.numberOfBackgrounds },
      (e, i) => `Url(/assets/mainbg${i + 1}.jpg`
    )
  );

  key$ = fromEvent(this.document, 'keyup').pipe(
    filter((ev: KeyboardEvent) => ['F2', 'F4'].includes(ev.key)),
    tap(ev => ev.preventDefault()), // side effect take away original meaning of key   map((ev: KeyboardEvent) => ev.key),
    map(ev => ev.key),
    tap(k => console.log('key', k))
  );

  @ViewChild('main') main;

  constructor(
    public raki: RakiService,
    private swUrlService: SwUrlService,
    @Inject(DOCUMENT) private document: any
  ) {}

  ngOnInit() {
    if (this.hasArt) {

ngOnInit() {
    this.problems = this.store.select('competition').pipe(
      map(x => {
        return x.problem
      })
    )
    this.store.dispatch(new problemActions.Query())
    this.problems.subscribe(x => {
      if (x.ids.length >= 40) {
        MathJax.Hub.Queue(['Typeset', MathJax.Hub])
      }
    })

    fromEvent(document, 'scroll')
      .pipe(
        debounceTime(200),
        distinct(),
        tap(() => {
          MathJax.Hub.Queue(['Typeset', MathJax.Hub])
        })
      )
      .subscribe()

    this.store.dispatch(new solutionActions.Query())

    interval(1000).subscribe(() => {
      const enddate = new Date('2018-12-14 18:00:00') // TODO
      const now = new Date()

      const distance = enddate.getTime() - now.getTime()

rxRepState._subs.push(fromEvent(evEmitter, 'change').subscribe(function (ev) {
    if (rxRepState._subjects.docs.observers.length === 0 || ev.direction !== 'pull') return;
    ev.change.docs.filter(function (doc) {
      return doc.language !== 'query';
    }) // remove internal docs
    .map(function (doc) {
      return rxRepState.collection._handleFromPouch(doc);
    }) // do primary-swap and keycompression
    .forEach(function (doc) {
      return rxRepState._subjects.docs.next(doc);
    });
  })); // error


  rxRepState._subs.push(fromEvent(evEmitter, 'error').subscribe(function (ev) {
    return rxRepState._subjects.error.next(ev);
  })); // active


  rxRepState._subs.push(fromEvent(evEmitter, 'active').subscribe(function () {
    return rxRepState._subjects.active.next(true);
  }));

  rxRepState._subs.push(fromEvent(evEmitter, 'paused').subscribe(function () {
    return rxRepState._subjects.active.next(false);
  })); // complete


  rxRepState._subs.push(fromEvent(evEmitter, 'complete').subscribe(function (info) {
    /**
     * when complete fires, it might be that not all changeEvents

ngZone.runOutsideAngular(() => {
      this._change = _platform.isBrowser ?
          merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange')) :
          observableOf();

      // Note that we need to do the subscription inside `runOutsideAngular`
      // since subscribing is what causes the event listener to be added.
      this._invalidateCache = this.change().subscribe(() => this._updateViewportSize());
    });
  }

private watchNetworkInit() {
    this.networkStatus = navigator.onLine;
    const connect = fromEvent(window, 'online').pipe(map(() => true)),
      disconnect = fromEvent(window, 'offline').pipe(map(() => false));

    this.networkStatusChanges = merge(connect, disconnect).pipe(share());
    this.networkStatusChanges.subscribe(status => {
      this.networkStatus = status;
    });
  }

console.error('could not find closest section for event listeners.')
            return
        }
        createTooltips()
        const { baseRev, headRev } = revState
        if (baseRev !== undefined) {
            this.setState(() => ({ revState: { headRev, baseRev } }))
        } else {
            this.subscriptions.add(
                resolveParentRev({ repoPath, rev: revState.headRev! }).subscribe(rev => {
                    this.setState(() => ({ revState: { headRev, baseRev: rev } }))
                })
            )
        }
        this.subscriptions.add(
            merge(fromEvent(closestSection, 'mouseover'), fromEvent(closestSection, 'click'))
                .pipe(debounceTime(50))
                .subscribe((e: MouseEvent) => {
                    this.handleTokens(e)
                })
        )
    }

private _getFreeTextOutsideClickStream(): Observable {
    if (!this._document) {
      return observableOf();
    }

    return (merge(
      fromEvent(this._document, 'click'),
      fromEvent(this._document, 'touchend'),
    ).pipe(
      filter((event: Event) => {
        const clickTarget = event.target as HTMLElement;
        const filterField = this._elementRef.nativeElement;
        return (
          isDtFreeTextDef(this._currentDef) &&
          clickTarget !== filterField &&
          (!filterField || !filterField.contains(clickTarget))
        );
      }),
    ) as any) as Observable;
  }

const makeClickSource = el =>
  fromEvent(el, 'click').pipe(
    map(clickEvent => mapInputToCoordinate(el, clickEvent))
  );

bindMessageHandlers(client, handlers, transform) {
        const close$ = rxjs_1.fromEvent(client, constants_1.CLOSE_EVENT).pipe(operators_1.share(), operators_1.first());
        const source$ = rxjs_1.fromEvent(client, 'message').pipe(operators_1.mergeMap(data => this.bindMessageHandler(data, handlers, transform).pipe(operators_1.filter(result => result))), operators_1.takeUntil(close$));
        source$.subscribe(response => client.send(JSON.stringify(response)));
    }
    bindMessageHandler(buffer, handlers, transform) {

private get outsideClickStream(): Observable {
        if (!this.document) {
            return of(null);
        }

        return merge(
            fromEvent(this.document, 'click'),
            fromEvent(this.document, 'touchend')
        ).pipe(
            filter((event: MouseEvent | TouchEvent) => {
                const clickTarget = event.target as HTMLElement;
                return this._panelOpen && clickTarget !== this.element.nativeElement;
            }),
            takeUntil(this.onDestroy$)
        );
    }