Flex-layout: Initial value of ObservableMedia not received

Created on 4 Apr 2017 · 9Comments · Source: angular/flex-layout

If I subscribe to ObservableMedia, the first (initial) value ist not received.
plunker.

The plunker example never receives the first value. In my own app, I get this first value in "xs" and "sm" size. If my browser windows is larger (gt-sm) at the time of loading the app (or refreshing), I do not get the first value.

P0 has pr

Source

erikkolo

👍10

All 9 comments

Dupe: https://github.com/angular/flex-layout/issues/240

intellix on 5 Apr 2017

https://github.com/angular/flex-layout/issues/240 was closed despite the fact that this is an issue that more than one user is experiencing.

rolandjitsu on 18 Apr 2017

I also think I know what the issue is (or might be). Right now, I'm subscribing to the ObservableMedia in a ngOnInit() block, whereas if I subscribe to it in a constructor it seems to be triggered. So I wonder if the ObservableMedia acts as a Subject or BehaviorSubject?

The behaviour I'm experiencing leads to the conclusion it's probably not a BehaviorSubject, but it should be. As a user, when I subscribe to it, I'd expect to get the last registered value.

I haven't looked at the actual implementation, but I guess this might be the reason why some users don't see a value on subscribe, or at least that's why I don't.

rolandjitsu on 18 Apr 2017

As a possible workaround I created an intermediary service that keeps MediaChange value in a ReplaySubject and it's initialized in AppComponent. So you can subscribe on MediaReplay.subject$ within your app.

export class MediaReplay {
    private _media$: ReplaySubject<MediaChange> = new ReplaySubject(1);

    constructor(media:ObservableMedia) {
        media.asObservable()
            .subscribe(res => this._media$.next(res), err => this._media$.error(err), () => this._media$.complete());
    }

    get media$(): Observable<MediaChange> {
        return this._media$.asObservable();
    }
}

export class AppComponent {
    constructor(mediaReplay: MediaReplay) {} //so it's initialized when the app starts
}