feat(playground): add @query decorators example

playground/app/app.ts

@@ -1,6 +1,8 @@
 import * as angular from 'angular';
 import { provide } from 'ng-metadata/core';
 
+import {TabsModule} from './components/tabs/index'
+
 import { TodoAppCmp } from './components/todo-app.component';
 import { TodoItemCmp } from './components/todo-item.component';
 import { AddTodoCmp } from './components/add-todo.component';
@@ -11,11 +13,13 @@ import { TodoStore } from './stores/todoStore.service';
 
 import { ElementReadyDirective } from './directives/element-ready.directive';
 
-export const AppModule = angular.module( 'app', [] )
+export const AppModule = angular.module( 'app', [TabsModule] )
 
   .directive( ...provide( TodoAppCmp ) )
   .directive( ...provide( AddTodoCmp ) )
   .directive( ...provide( TodoItemCmp ) )
   .filter( ...provide( RemainingTodosPipe ) )
   .service( ...provide( TodoStore ) )
-  .directive( ...provide( ElementReadyDirective ) );
+  .directive( ...provide( ElementReadyDirective ) )
+
+  ;

playground/app/components/tabs/contentChild.ts

@@ -0,0 +1,17 @@
+import { forwardRef,Component, Input,Inject,Host, OnChildrenChanged, AfterViewInit, OnDestroy } from 'ng-metadata/core';
+import { TabsComponent } from './tabs';
+
+@Component({
+  selector:'tabs-content-child',
+  template:(
+    `<h5>Tabs CONTENT child! #{{ $ctrl.id }}</h5>`
+  )
+})
+export class TabsContentComponent implements OnChildrenChanged,AfterViewInit, OnDestroy{
+  @Input() id: string;
+
+  constructor(
+    @Inject(forwardRef(()=>TabsComponent)) @Host() private tabs: TabsComponent
+  ){}
+
+}

playground/app/components/tabs/index.ts

@@ -0,0 +1,12 @@
+import * as angular from 'angular';
+import { provide } from 'ng-metadata/core';
+
+import { TabsComponent } from './tabs';
+import { TabsChildComponent } from './viewChild';
+import { TabsContentComponent } from './contentChild';
+
+export const TabsModule = angular.module('myTabs',[])
+  .directive(...provide(TabsComponent))
+  .directive(...provide(TabsChildComponent))
+  .directive(...provide(TabsContentComponent))
+  .name 

playground/app/components/tabs/tabs.ts

@@ -0,0 +1,92 @@
+import {
+  Inject,
+  Host,
+  Component,
+  ViewChild,
+  ViewChildren,
+  ContentChild,
+  ContentChildren,
+  AfterViewChecked,
+  AfterContentChecked,
+  OnChildrenChanged
+} from 'ng-metadata/core';
+import { TabsChildComponent } from './viewChild';
+import { TabsContentComponent } from './contentChild';
+
+@Component( {
+  selector: 'tabs',
+  template: (
+    `<div>
+    <h4>Tabs!</h4>
+    <button ng-click="$ctrl.addItem()">add viewChild</button>
+    <tabs-child id="0"></tabs-child>
+    <ul><li ng-repeat="item in $ctrl.items">
+      <tabs-child id="item"></tabs-child>
+      <button ng-click="$ctrl.removeItem(item)">remove</button>
+    </li></ul>
+    <div ng-transclude=""></div>
+    <hr>
+    <h6>viewChildred</h6>
+    <pre>{{ $ctrl.tabsChildren.length }}</pre>
+    <h6>contentChildren</h6>
+    <pre>{{ $ctrl.tabsContents.length }}</pre>
+    </div>`
+  ),
+  //directives: [ TabsChildComponent ],
+  legacy: {
+    transclude: true
+  }
+} )
+export class TabsComponent implements AfterViewChecked,AfterContentChecked,AfterContentInit,AfterViewInit{
+
+  @ViewChild( TabsChildComponent )
+  firstTabsChild: TabsChildComponent;
+
+  @ViewChildren( TabsChildComponent )
+  tabsChildren: TabsChildComponent[];
+
+  @ViewChildren( 'h6' )
+  h6titles: ng.IAugmentedJQuery;
+
+  @ContentChild( TabsContentComponent )
+  firstTabsContent: TabsContentComponent;
+
+  @ContentChildren( TabsContentComponent )
+  tabsContents: TabsContentComponent[];
+
+  ngAfterViewInit(){
+    console.info('hello from prototype.ngAfterViewInit',this);
+    console.log(this.h6titles);
+
+  }
+  ngAfterContentInit(){
+    console.info('hello from prototype.ngAfterContentInit',this);
+  }
+  ngAfterViewChecked(){
+    console.log('hello from prototype.ngAfterViewChecked');
+  }
+  ngAfterContentChecked(){
+    console.log('hello from prototype.ngAfterContentChecked');
+  }
+
+
+
+
+
+  items = [11,22,33];
+
+
+
+  removeItem(item){
+    const idx = this.items.indexOf(item);
+    if(idx!==-1){
+      this.items.splice(idx,1);
+    }
+  }
+
+  addItem(){
+    const newId = this.items[this.items.length-1]+2;
+    this.items.push(newId);
+  }
+
+}

playground/app/components/tabs/viewChild.ts

@@ -0,0 +1,19 @@
+import { forwardRef,Component, Input,Inject,Host, OnChildrenChanged, AfterViewInit, OnDestroy } from 'ng-metadata/core';
+import { TabsComponent } from './tabs';
+
+
+@Component({
+  selector:'tabs-child',
+  template:(
+    `<h5>Tabs child #{{ $ctrl.id }}!</h5>`
+  )
+})
+export class TabsChildComponent implements AfterViewInit, OnDestroy{
+  @Input() id:number;
+
+  constructor(
+    @Inject(forwardRef(()=>TabsComponent)) @Host() private tabs: TabsComponent
+  ){}
+
+
+}

playground/app/components/todo-app.component.ts

@@ -3,7 +3,8 @@ import { TodoModel, TodoStore } from '../stores/todoStore.service';
 
 @Component( {
   selector: 'todo-app',
-  templateUrl: './app/components/todo-app.html'
+  templateUrl: './app/components/todo-app.html',
+  legacy:{transclude:true}
 } )
 export class TodoAppCmp{
 
@@ -15,6 +16,15 @@ export class TodoAppCmp{
 
     this.todos = this.todoStore.todos;
   }
+
+  ngAfterViewInit(){
+    console.info('viewINit');
+
+  }
+  ngAfterContentInit(){
+
+    console.info('contentINit');
+  }
 
   createTodo( todo: TodoModel ) {
 
@@ -49,5 +59,18 @@ export class TodoAppCmp{
 
   }
 
+  items = ['OOONE','TTTTTWO','THREEEE'];
+  removeItem(item){
+    const idx = this.items.indexOf(item);
+    if(idx!==-1){
+      this.items.splice(idx,1);
+    }
+  }
+  addItem(){
+    const newId = this.items[this.items.length-1]+Date.now();
+    this.items.push(newId);
+  }
+
+
 
 }

playground/app/components/todo-app.html

@@ -20,3 +20,21 @@ <h3>Todo List remaining: {{ $ctrl.todos | remainingTodos }}</h3>
 
   </li>
 </ul>
+
+<hr>
+
+<button  
+  class="mdl-button mdl-js-button mdl-button--accent"
+  ng-click="$ctrl.showQueryExample=!$ctrl.showQueryExample">{{ $ctrl.showQueryExample ? 'hide' : 'show'}} <code>@Query</code> decorators example
+</button>
+<div ng-if="$ctrl.showQueryExample">
+  <h3>check your console logs mate!</h3>
+<tabs>
+  <tabs-content-child></tabs-content-child>
+  <button ng-click="$ctrl.addItem()">add contentChild</button>
+  <ul><li ng-repeat="item in $ctrl.items">
+    <tabs-content-child id="item"></tabs-content-child>
+    <button ng-click="$ctrl.removeItem(item)">remove</button>
+  </li></ul>
+</tabs>
+</div>