Bug: change detection error in td-layout components

Bug Report

Currently there is a bug related to the way that properties in td-layout components are set using the media service. Take as example:

<td-layout-nav-list #manageList [opened]="media.registerQuery('gt-sm') | async" [mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'over'"
  [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '250px' : '65%'" logo="assets:warehouse" navigationRoute="/">

It will throw the following error:

LayoutPageComponent.html:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'side'.
    at viewDebugError (core.es5.js:8507)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8485)
    at checkBindingNoChanges (core.es5.js:8649)
    at checkNoChangesNodeInline (core.es5.js:12504)
    at checkNoChangesNode (core.es5.js:12476)
    at debugCheckNoChangesNode (core.es5.js:13251)
    at debugCheckDirectivesFn (core.es5.js:13153)
    at Object.eval [as updateDirectives] (LayoutPageComponent.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13135)
    at checkNoChangesView (core.es5.js:12296)
    at callViewAction (core.es5.js:12660)

Another example:

<td-layout-manage-list #manageList [opened]="false" [mode]="'over'" [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '280px' : '70%'">

WIll cause the following:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: '280px'.
    at viewDebugError (core.es5.js:8507)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8485)
    at checkBindingNoChanges (core.es5.js:8649)
    at checkNoChangesNodeInline (core.es5.js:12506)
    at checkNoChangesNode (core.es5.js:12476)
    at debugCheckNoChangesNode (core.es5.js:13251)
    at debugCheckDirectivesFn (core.es5.js:13153)
    at Object.View_LayoutPageComponent_0._co [as updateDirectives] (LayoutPageComponent.html:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13135)
    at checkNoChangesView (core.es5.js:12296)
    at callViewAction (core.es5.js:12660)

What is the expected behavior?

No error should be triggered.

Which version of Angular and Material, and which browser and OS does this issue affect?

material: beta.6 covalent/core: beta.5 angular: 4.2.0 (all) angular-cli: 1.1.1

Other information

A possible fix was pointed already by @emoralesb05

Promise.resolve(undefined).then(() => {
      this.media.broadcast();
      this._changeDetectorRef.markForCheck();
    });

The way this is implemented in the current version of the covalent documentation page is:

//constructor of a component
constructor(private _changeDetectorRef: ChangeDetectorRef,
              public media: TdMediaService) {}

  ngAfterViewInit(): void {
    // broadcast to all listener observables when loading the page
    this.media.broadcast();
    this._changeDetectorRef.detectChanges();
  }

[asaph26]

@emoralesb05 : It was the full screen loading. Thanks for the quick fix. Will try out with the latest nightly.

[jotatoledo]

I would suggest to leave the issue open for a while so that ppl can see it. Furthermore it might be a good idea to update the changelog with this info 😄