diff --git a/src/app/components/home/home.component.ts b/src/app/components/home/home.component.ts
index 9bf61853be..4f1036fbfa 100644
--- a/src/app/components/home/home.component.ts
+++ b/src/app/components/home/home.component.ts
@@ -1,5 +1,4 @@
 import { Component, HostBinding, AfterViewInit } from '@angular/core';
-import { TdMediaService } from '@covalent/core';
 import { GitHubService } from '../../services';
 
 import { fadeAnimation } from '../../app.animations';
@@ -72,12 +71,10 @@ export class HomeComponent implements AfterViewInit {
     },
   ];
 
-  constructor(private _gitHubService: GitHubService,
-              public media: TdMediaService) {
+  constructor(private _gitHubService: GitHubService) {
   }
 
   ngAfterViewInit(): void {
-    this.media.broadcast();
     this._gitHubService.queryStartCount().subscribe((starsCount: number) => {
       this.starCount = starsCount;
     });
diff --git a/src/app/components/layouts/manage-list/manage-list.component.html b/src/app/components/layouts/manage-list/manage-list.component.html
index f4d246648d..273a1ec3b5 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.html
+++ b/src/app/components/layouts/manage-list/manage-list.component.html
@@ -171,15 +171,20 @@ <h3 class="md-title">HTML</h3>
             <h3 class="md-title">Typescript</h3>
             <td-highlight lang="typescript">
               <![CDATA[
+                import { ChangeDetectorRef } from '@angular/core';
                 import { TdMediaService } from '@covalent/core';
                 ...
                 export class MyComponent {
 
-                  constructor(public media: TdMediaService) {}
+                  constructor(private _changeDetectorRef: ChangeDetectorRef,
+                              public media: TdMediaService) {}
 
                   ngAfterViewInit(): void {
                     // broadcast to all listener observables when loading the page
                     this.media.broadcast();
+                    // force a new change detection cycle since change detections
+                    // have finished when `ngAfterViewInit` is executed
+                    this._changeDetectorRef.detectChanges();
                   }
                 }
               ]]>
diff --git a/src/app/components/layouts/manage-list/manage-list.component.ts b/src/app/components/layouts/manage-list/manage-list.component.ts
index 66470202c8..8a63f8ade5 100644
--- a/src/app/components/layouts/manage-list/manage-list.component.ts
+++ b/src/app/components/layouts/manage-list/manage-list.component.ts
@@ -20,10 +20,8 @@ export class ManageListComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     // broadcast to all listener observables when loading the page
-    Promise.resolve(undefined).then(() => {
-      this.media.broadcast();
-      this._changeDetectorRef.markForCheck();
-    });
+    this.media.broadcast();
+    this._changeDetectorRef.detectChanges();
   }
 
 }
diff --git a/src/app/components/layouts/nav-list/nav-list.component.html b/src/app/components/layouts/nav-list/nav-list.component.html
index a17ecee8ab..77336bddb2 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.html
+++ b/src/app/components/layouts/nav-list/nav-list.component.html
@@ -157,15 +157,20 @@ <h3 md-line> Item Name </h3>
           <h3 class="md-title">Typescript</h3>
           <td-highlight lang="typescript">
             <![CDATA[
+              import { ChangeDetectorRef } from '@angular/core';
               import { TdMediaService } from '@covalent/core';
               ...
               export class MyComponent {
 
-                constructor(public media: TdMediaService) {}
+                constructor(private _changeDetectorRef: ChangeDetectorRef,
+                            public media: TdMediaService) {}
 
                 ngAfterViewInit(): void {
                   // broadcast to all listener observables when loading the page
                   this.media.broadcast();
+                  // force a new change detection cycle since change detections
+                  // have finished when `ngAfterViewInit` is executed
+                  this._changeDetectorRef.detectChanges();
                 }
               }
             ]]>
diff --git a/src/app/components/layouts/nav-list/nav-list.component.ts b/src/app/components/layouts/nav-list/nav-list.component.ts
index 31e685a7f2..46d40a7a47 100644
--- a/src/app/components/layouts/nav-list/nav-list.component.ts
+++ b/src/app/components/layouts/nav-list/nav-list.component.ts
@@ -20,10 +20,8 @@ export class NavListComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     // broadcast to all listener observables when loading the page
-    Promise.resolve(undefined).then(() => {
-      this.media.broadcast();
-      this._changeDetectorRef.markForCheck();
-    });
+    this.media.broadcast();
+    this._changeDetectorRef.detectChanges();
   }
 
 }