feat(playground): add AfterContentInit/Checked docs demos

playground/app/components/lifecycle/after-content.component.ts

@@ -0,0 +1,160 @@
+import {
+  AfterContentChecked,
+  AfterContentInit,
+  OnDestroy,
+  Component,
+  ContentChild,
+  Inject,
+  Host,
+  forwardRef
+} from 'ng-metadata/core';
+
+import { NgTimeout } from '../../shared/index';
+import { LoggerService }  from './logger.service';
+
+//////////////////
+@Component( {
+  selector: 'my-child-content',
+  template: `<input ng-model="$ctrl.hero" ng-change="$ctrl.notifyParent()" ng-blur="$ctrl.notifyParent()">`
+} )
+export class ChildContentComponent {
+  hero = 'Magneta';
+
+  constructor(
+    // we need to use forwardRef because the three hierarchy
+    @Host() @Inject( forwardRef( ()=>AfterContentComponent ) ) private afterContentCmp: AfterContentComponent
+  ) {}
+
+  notifyParent() {
+    // NOTE: we have to manually notify parent, in Angular 2 this is done by the framework automatically
+    // in Angular 1, #ngAfterContentChecked from parent will be automatically called only during child instantiation/removal
+    this.afterContentCmp.ngAfterContentChecked();
+  }
+
+}
+
+//////////////////////
+@Component( {
+  selector: 'after-content',
+  template: `
+    <button ng-click="$ctrl.toggleChild()">Toggle Child</button>
+    <div>-- projected content begins --</div>
+      <ng-transclude ng-if="$ctrl.show"></ng-transclude>
+    <div>-- projected content ends --</div>
+    
+    <p ng-if="$ctrl.comment" class="comment">
+      {{$ctrl.comment}}
+    </p>
+  `,
+  legacy: {
+    transclude: true
+  }
+} )
+export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
+  private prevHero = '';
+  comment = '';
+  show = true;
+
+  // Query for a CONTENT child of type `ChildContentComponent`
+  @ContentChild( ChildContentComponent ) contentChild: ChildContentComponent;
+
+  constructor( private logger: LoggerService ) {
+    this.logIt( 'AfterContent constructor' );
+  }
+
+  ngAfterContentInit() {
+    // viewChild is set after the view has been initialized
+    this.logIt( 'AfterContentInit' );
+    this.doSomething();
+  }
+
+  ngAfterContentChecked() {
+    const cch = this.contentChild;
+    // viewChild is updated after the view has been checked
+    if ( cch && this.prevHero === cch.hero ) {
+      this.logIt( 'AfterContentChecked (no change)' );
+    } else {
+      this.prevHero = cch && cch.hero;
+      this.logIt( 'AfterContentChecked' );
+      this.doSomething();
+    }
+  }
+
+  toggleChild() {
+    this.show = !this.show;
+  }
+
+  // This surrogate for real business logic sets the `comment`
+  private doSomething() {
+    if ( !this.contentChild ) return;
+    this.comment = this.contentChild.hero.length > 10
+      ? 'That\'s a long name'
+      : '';
+  }
+
+  private logIt( method: string ) {
+    const cch = this.contentChild;
+    const message = `${method}: ${cch
+      ? cch.hero
+      : 'no'} child view`;
+    this.logger.log( message );
+  }
+}
+
+//////////////
+@Component( {
+  selector: 'after-content-parent',
+  template: `
+  <div class="parent">
+    <h2>AfterContent</h2>
+
+    <div ng-if="$ctrl.show">
+    
+      <after-content>
+        <my-child-content></my-child-content>
+      </after-content>
+      
+    </div>
+
+    <h4>-- AfterContent Logs --</h4>
+    <p>
+      <button ng-click="$ctrl.reset()">Reset</button>
+    </p>
+    <div ng-repeat="msg in $ctrl.logs track by $index">{{msg}}</div>
+  </div>
+  <style>after-content-parent > .parent {background: burlywood}</style>
+  `,
+  providers: [ LoggerService ],
+  directives: [ AfterContentComponent, ChildContentComponent ]
+} )
+export class AfterContentParentComponent implements OnDestroy {
+  logs: string[];
+  show = true;
+
+  constructor(
+    private $timeout: NgTimeout,
+    logger: LoggerService
+  ) {
+    this.logs = logger.logs;
+  }
+
+  reset() {
+    this._emptyLog();
+    // quickly remove and reload AfterContentComponent which recreates it
+    this.show = false;
+    this.$timeout( () => this.show = true, 0 );
+  }
+
+  ngOnDestroy() {
+    this._emptyLog();
+  }
+
+  private _emptyLog() { this.logs.length = 0 }
+}
+
+
+/*
+ Copyright 2016 Google Inc. All Rights Reserved.
+ Use of this source code is governed by an MIT-style license that
+ can be found in the LICENSE file at http://angular.io/license
+ */

playground/app/components/lifecycle/index.ts

@@ -2,17 +2,21 @@ import * as angular from 'angular';
 import { provide } from 'ng-metadata/core';
 import { DoCheckComponent, DoCheckParentComponent } from './do-check.component';
 import { OnChangesComponent, OnChangesParentComponent } from './on-changes.component';
-import { AfterViewParentComponent,AfterViewComponent,ChildViewComponent } from './after-view.component';
+import { AfterViewParentComponent, AfterViewComponent, ChildViewComponent } from './after-view.component';
+import { AfterContentParentComponent, AfterContentComponent, ChildContentComponent } from './after-content.component';
 
 import { LoggerService } from './logger.service';
 
-export const LifecycleHooksModule = angular.module('lifecyceHooks', [])
-  .directive(...provide(DoCheckParentComponent))
-  .directive(...provide(DoCheckComponent))
-  .directive(...provide(OnChangesParentComponent))
-  .directive(...provide(OnChangesComponent))
-  .directive(...provide(AfterViewParentComponent))
-  .directive(...provide(AfterViewComponent))
-  .directive(...provide(ChildViewComponent))
+export const LifecycleHooksModule = angular.module( 'lifecyceHooks', [] )
+  .directive( ...provide( DoCheckParentComponent ) )
+  .directive( ...provide( DoCheckComponent ) )
+  .directive( ...provide( OnChangesParentComponent ) )
+  .directive( ...provide( OnChangesComponent ) )
+  .directive( ...provide( AfterViewParentComponent ) )
+  .directive( ...provide( AfterViewComponent ) )
+  .directive( ...provide( ChildViewComponent ) )
+  .directive( ...provide( AfterContentParentComponent ) )
+  .directive( ...provide( AfterContentComponent ) )
+  .directive( ...provide( ChildContentComponent ) )
   .service( ...provide( LoggerService ) )
   .name;

playground/app/components/todo-app.html

@@ -164,6 +164,17 @@ <h3>Docs examples:</h3>
   </div>
 </section>
 
+<section class="demo-content">
+  <button
+    class="mdl-button mdl-js-button mdl-button--accent"
+    ng-click="$ctrl.showLcAfterContent=!$ctrl.showLcAfterContent">
+    {{ $ctrl.showLcAfterContent? 'hide' : 'show'}} <code>AfterContentInit/AfterContentChecked</code> LC example
+  </button>
+  <div ng-if="$ctrl.showLcAfterContent">
+    <after-content-parent></after-content-parent>
+  </div>
+</section>
+
 <!--CHANGE DETECTOR REF-->
 <section class="demo-content">
   <button