feat(playground): add more examples with new features, like one way b…

…inding etc

playground/app/app.ts

@@ -16,18 +16,74 @@ import { MyValidatorDirective } from './directives/my-validator.directive';
 import { MyFooDirective } from './directives/my-foo.directive';
 import { MyFormBridgeDirective } from './directives/my-form-bridge.directive';
 import { MyDirectiveTesterDirective } from './directives/my-directive-tester.directive';
-
+import { TesterAttrDirective } from './directives/my-tester.directive';
+import { TesterComponent } from './components/tester/tester.component';
 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( MyValidatorDirective ) )
   .directive( ...provide( MyFooDirective ) )
   .directive( ...provide( MyFormBridgeDirective ) )
   .directive( ...provide( MyDirectiveTesterDirective ) )
+  .directive( ...provide( TesterComponent ) )
+  .directive( ...provide( TesterAttrDirective ) )
+  /*.directive('myTesterAttr2',function(){
+    return {
+      restrict: 'A',
+      bindToController: true,
+      controllerAs:'__foo',
+      controller: ['$scope','$element','$attrs','$injector',
+      function _ctrl($scope:ng.IScope,$element,$attrs,$injector){
+
+        class Foo{
+          inOne = { name: 'default yo'};
+          static $inject = [];
+          constructor(){
+            console.log( 'myTesterAttr', angular.toJson(this,true) );
+          }
+          ngOnInit(){
+            console.info('heeeey Foo');
+          }
+        }
+
+        let $ctrl = this;
+
+        const $parse = $injector.get<ng.IParseService>('$parse');
+        const $interpolate = $injector.get<ng.IInterpolateService>('$interpolate');
+
+        const instance = Object.create( Foo.prototype );
+        // Object.assign( instance, this );
+
+        // bindings
+        const parentGet = $parse($attrs['inOne']);
+        $ctrl['inOne'] = parentGet($scope);
+        // instance['inOne'] = $scope.$eval($attrs.inOne);
+        $scope.$watch( parentGet, ( newParentValue ) => {
+        // $scope.$watch( $attrs.inOne, ( newParentValue ) => {
+          $ctrl[ 'inOne' ] = newParentValue;
+        } );
+
+        // const origInst = Object.assign({},instance);
+
+        const result = $injector.invoke( Foo, instance, {} );
+
+        Object.assign(this,instance);
+        this.__proto__ = instance.__proto__;
+        // Object.assign(this.prototype,)
+
+      }],
+      // link: {
+      //   pre: angular.noop,
+      //   post: function(s,e,a){}
+      // }
+    }
+  })*/
 
   ;

playground/app/components/tester/tester.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, Output, Attr } from 'ng-metadata/core';
+
+@Component({
+  selector:'my-tester',
+  template:`
+  <h4>Tester Cmp</h4>
+  <pre>
+  {{ $ctrl.inOne | json }}
+  {{ $ctrl.outOne | json }}
+  {{ $ctrl.attrOne | json }}
+  </pre>
+  <button ng-click="$ctrl.outOne();$event.stopPropagation();">exec outOne</button>
+  <hr>
+  <ng-transclude></ng-transclude>
+  <div>
+    <input type="text" ng-model="$ctrl.twoWay">
+    <code>{{ $ctrl.twoWay }}</code>
+  </div>
+  `,
+  legacy:{transclude:true}
+})
+export class TesterComponent{
+  @Input() twoWay;
+  @Input() inOne = { name:'Martin' };
+  @Output() outOne = ()=>{ console.log( 'boooo' );};
+  @Attr() attrOne = 'hello default';
+
+  constructor(){
+    console.log( '===Tester CMP ctor====' );
+    console.log( this.outOne.toString() );
+    console.log( angular.toJson( this, true ) );
+  }
+
+  ngOnInit(){
+    console.log( '===Tester CMP, OnInit====' );
+    console.log( this.outOne.toString() );
+    console.log( angular.toJson(this,true) );
+  }
+
+}

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

@@ -87,6 +87,19 @@ export class TodoAppCmp{
     }
   };
 
+  cmpTester = {
+    model: {name:'matt murdock'},
+    interpolate: 'one batch, two batch',
+    cb: ()=>console.log( 'bang!' ),
+    changeValues: ($event: ng.IAngularEvent)=>{
+      $event.stopPropagation();
+      this.cmpTester.model = {name:'electra'};
+      this.cmpTester.interpolate = 'hells kitchen is here';
+    }
+  };
+
+  twoWay='hello';
+
 
 
 }

playground/app/components/todo-app.html

@@ -84,12 +84,36 @@ <h3>check your console logs mate!</h3>
 </button>
 <div ng-if="$ctrl.showDirectivePropDecoratorsExample">
 
- <div my-directive-tester pure-string="hello!" interpolated="{{ $ctrl.directive.example.interpolated }}"
-  binding="$ctrl.directive.example.binding"
-  some-cb="$ctrl.directive.example.cb(from)"
- >
- Hello content
- <button ng-click="$ctrl.directive.changeValues()">Change values</button>
- </div>
+  <div
+    my-directive-tester
+    pure-string="hello!"
+    interpolated="{{ $ctrl.directive.example.interpolated }}"
+    binding="$ctrl.directive.example.binding"
+    some-cb="$ctrl.directive.example.cb(from)"
+  >
+    Hello content
+    <button ng-click="$ctrl.directive.changeValues()">Change values</button>
+  </div>
 
 </div>
+
+
+<button
+  class="mdl-button mdl-js-button mdl-button--accent"
+  ng-click="$ctrl.showTesterCmp=!$ctrl.showTesterCmp">
+  {{ $ctrl.showTesterCmp ? 'hide' : 'show'}} <code>@Component</code> Tester example
+</button>
+<div ng-show="$ctrl.showTesterCmp"> Two way:
+  <code>{{ $ctrl.twoWay }}</code>
+</div>
+<div ng-if="$ctrl.showTesterCmp">
+  <my-tester
+    my-tester-attr
+    two-way="$ctrl.twoWay"
+    in-one="$ctrl.cmpTester.model"
+    attr-one="{{ $ctrl.cmpTester.interpolate }}"
+    out-one="$ctrl.cmpTester.cb()"
+  >
+    <button ng-click="$ctrl.cmpTester.changeValues($event)">Change values bindings</button>
+  </my-tester>
+</div>

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

@@ -10,17 +10,10 @@ import { TodoModel } from '../stores/todoStore.service';
 })
 export class TodoItemCmp{
 
-  @Input('todo') _todo: TodoModel;
-  @Input() idx: number;
+  @Input('<') todo: TodoModel;
+  @Input('<') idx: number;
   @Output() onDone: ( todo: {todo:TodoModel} )=>void;
 
-  todo: TodoModel;
-
-  constructor(){
-
-    this.todo = angular.copy( this._todo );
-  }
-
   ngOnInit(){}
 
   done(todo: TodoModel) {

playground/app/directives/my-directive-tester.directive.ts

@@ -13,7 +13,7 @@
  * @param {}
  */
 
-import { Directive, Attr, Input, Output } from 'ng-metadata/core';
+import { Directive, Attr, Input, Output, Inject } from 'ng-metadata/core';
 
 @Directive( {
   selector: '[my-directive-tester]',
@@ -27,7 +27,7 @@ export class MyDirectiveTesterDirective {
 
   @Output() someCb: Function;
 
-  constructor(){
+  constructor(@Inject('$attrs') private $attrs){
     console.log('constructor', JSON.stringify(this,null,2));
     this.someCb({ from: 'constructor' });
   }

playground/app/directives/my-tester.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, Input, Output, Attr, HostListener } from 'ng-metadata/core';
+
+@Directive({
+  selector:'[my-tester-attr]',
+})
+export class TesterAttrDirective{
+  @Input() inOne = { name:'Martin from directive' };
+  @Output() outOne = ()=>{ console.log( 'mooo from directive' ) };
+  // @Output() outOne: Function;
+  @Attr() attrOne = 'hello default from directive';
+
+  constructor(){
+    console.log( '===Tester DIR, ctor====' );
+    console.log( this.outOne.toString() );
+    console.log( angular.toJson(this,true) );
+  }
+
+  ngOnInit(){
+    console.log( '===Tester DIR, OnInit====' );
+    console.log( this.outOne.toString() );
+    console.log( angular.toJson(this,true) );
+  }
+
+  @HostListener('click')
+  onClick(){
+    console.log( 'onClick called!', this );
+    this.outOne();
+  }
+}