Add initial value in fromEvent resize observable

Question

I try to get an observable of the window innerWidth.

I set a fromEvent observable watching on resize event

public get nativeWindow(): Window {
  return window;
}

public getWindowSize(): Observable<number> {
  return fromEvent(this.nativeWindow, 'resize').pipe(
    map(event => (event.target as Window).innerWidth)
  );
}

I want to be able to get the initial value of window.innerWidth because resize won't fire until actual window resize.

I could use BehaviorSubject but it forces me to subscribe to fromEvent to next on the subject.

We tried use a startWith(this.nativeWindow.innerWidth) operator before the map but the map then doesn't get the event argument as Event but get the startWith number instead.

Is there any rxjs operator which could allow me initialize first number before getting actual resize events?

martin · Accepted Answer · 2018-08-31 14:41:52Z

11

So the problem is that you need map to process the initial value but at the same time you need it to work with Event objects that are only emitted by 'resize' event.

Well the easiest way is to just use startWith after map:

return fromEvent(this.nativeWindow, 'resize').pipe(
  map(event => (event.target as Window).innerWidth),
  startWith(this.nativeWindow.innerWidth)
);

or if this isn't possible (eg. the logic is more complicated) you can "mock" the object so map will process it like any other Event object.

return fromEvent(this.nativeWindow, 'resize').pipe(
  startWith({ target: { innerWidth: this.nativeWindow.innerWidth }}),
  map(event => (event.target as Window).innerWidth)
);

edited Aug 31, 2018 at 14:41

answered Aug 31, 2018 at 12:03

martin

97.4k26 gold badges205 silver badges237 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gary Over a year ago

Couldn't you just startWith({ target: this.nativeWindow }), when the startWith is before the map?

Suren Srapyan · Accepted Answer · 2018-08-31 12:42:01Z

2

You can use startWith operator and pass an initial value to the observable

import { startWith } from 'rxjs/operators';

return fromEvent(this.nativeWindow, 'resize').pipe(
    startWith({ target: nativeWindow }),
    map(event => (event.target as Window).innerWidth)
);

edited Aug 31, 2018 at 12:42

answered Aug 31, 2018 at 11:54

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

1 Comment

Suren Srapyan Over a year ago

Sorry. { target: nativeWindow } must be applied instead of nativeWindow.innerWidth

Collectives™ on Stack Overflow

Add initial value in fromEvent resize observable

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related