initial value of ObservableMedia

[jurafa]

Hi.
If I subscribe to observable media I don't receive first notification about initial media query if on 'md' and larger devices. If I am on 'sm' or 'xs' devices, my subscription gets invoked with initial value as expected. If I change size of the browser window, I get all notifications as expected.

How can I get the media query after initialization on devices bigger than 'md'?

Thanks.

[ThomasBurleson]

Issues are considered invalid without a working Plunkr or CodePen demo.

---

Also here are some important guidelines for investigating a Layout issue:

• The Layout API is case-sensitive
  • fxlayout is not valid
  • fx-layout is not valid
  • fxLayout is valid
• If you cannot get Flex-Layout to work with an example, try to manually use CSS flexbox stylings. If that still does not work to achieve your goals, then Flex-Layout is not the issue.
• If hand-crafted CSS resolves the issue, but Flex-Layout does not then we definitely have a bug in this repository.

---

Templates

• Plunkr Template
• Plunkr Template with Material2

[ThomasBurleson]

Closing as invalid without demo.

[rolandjitsu]

I've also experienced the same issue where the initial value is not emitted. Furthermore, there is some very strange behaviour that I'm experiencing with all the fxLayout, fxFlex directives. For instance, fxFlex also sets styling on the parent (I'm not sure this is expected behaviour).

[benjamindamm]

The issue is clearly described and happens also in my project. Demo is unnecessary, its the standard behavior. Closed Bugs like this don't exist? Or how should I interpret the answer? The initial value for the Observable is invalid, you receive a valid value only if you change your browser window to the next Breakpoint.

[ThomasBurleson]

@rolandjitsu, @benjamindamm - Are you using the latest nightly releases? We are not seeing this issue on our online demos (which use the latest builds).

[rolandjitsu]

@ThomasBurleson I am using beta.8. I'll try the other install and see if it works. But there has been quite some time since a release, is there a reason for that?

[benjamindamm]

Yes you are right. But the error still exists. I don't want to create my own service, if there is a good solution from angular already. Even the Observer on changing the screen size works very lazy. In some moments it works but mostly not. The initial value works never unfortunately.

I am using 2.0.0.beta.8

Sorry for reopening, if you already fixed that. But I run in this error and found no solution in these threads. Btw I'm trying this way:

constructor(private media: ObservableMedia) { this.media.asObservable() .subscribe((change) => { console.log(change); }); }

Well so this console.log, never executes on startup. It should get called in my constructor of the component. On changing the screen size in my browser, it gets fired sometimes. If I resize very slowly.

fxLayout doesn't help me, I need the JS-way.

If I am doing it wrong, let us post a solution here, if any other runs into this error. Closed threads without any solution are helpless for others.

[ThomasBurleson]

@benjamindamm - the nightly builds (code in master that will be released with Beta.9) should fix this issue. Do you see this same issue occurring in our Online Demos (Responsive Tab) ?

Beta.9 release was planned for last week, but internal testing found some lingering issues with our new responsive Image API. We should have a release THIS week.

[ThomasBurleson]

Fixed

[brendanalexdr]

I am using @angular/flex-layout 6.0.0-beta.16 and this does not seem to be fixed. Is there any trick to getting the observable media to fire upon OnInit?

[mihalcan]

@nukuuk The current workaround is add a listener in the constructor as MediaService uses BehaviourSubject internally #245 (comment)

The working plunker - https://plnkr.co/edit/yylQr2IdbGy2Yr00srrN?p=preview

[brendanalexdr]

@mihalcan thanks for that I'll try it out!

[vsarathy]

Just for the record, noted this issue still exists in 7.0.0-beta.24. I am using the suggestion made by @mihalcan

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}