chore(): update documentation with the way to use media.broadcast wit…

…h layouts in ngAfterViewInit (#685)

angular is more restrictive now and complains if we dont excplicitly call a change detection cycle when changing any input via a life hook cycle such as ngAfterViewInit and ngAfterContentInit..

this happens because the change detections have finished by then, so if you must change anything at that point, you need to call explicitly for a new change detection cycle via `detectChanges`

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;
     });

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();
                   }
                 }
               ]]>

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();
   }
 
 }

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();
                 }
               }
             ]]>

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();
   }
 
 }