feat(playground): add OnChanges examples

ngParty · Apr 3, 2016 · bfdfe0c · bfdfe0c
1 parent 31a33d1
commit bfdfe0c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/playground/app/components/tester/tester.component.ts b/playground/app/components/tester/tester.component.ts
@@ -12,16 +12,23 @@ import { Component, Input, Output, Attr } from 'ng-metadata/core';
   <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>
+  <fieldset>
+    <div>
+      <label>TWO WAY</label>
+      <input type="text" ng-model="$ctrl.twoWay">
+    </div>
+    <div>
+      <label>ONE WAY</label>
+      <input type="text" ng-model="$ctrl.oneWay">
+    </div>
+  </fieldset>
   `,
   legacy:{transclude:true}
 })
 export class TesterComponent{
+  @Input('<') oneWay;
   @Input() twoWay;
-  @Input() inOne = { name:'Martin' };
+  @Input('<') inOne = { name:'Martin' };
   @Output() outOne = ()=>{ console.log( 'boooo' );};
   @Attr() attrOne = 'hello default';
 
@@ -37,4 +44,8 @@ export class TesterComponent{
     console.log( angular.toJson(this,true) );
   }
 
+  ngOnChanges(changes){
+    console.log( 'TesterComponent changes:', changes );
+  }
+
 }
diff --git a/playground/app/components/todo-app.html b/playground/app/components/todo-app.html
@@ -103,12 +103,20 @@ <h3>check your console logs mate!</h3>
   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>
+<fieldset ng-show="$ctrl.showTesterCmp">
+  <div>
+    <label>TWO WAY</label>
+    <input type="text" ng-model="$ctrl.twoWay">
+  </div>
+  <div>
+    <label>ONE WAY</label>
+    <input type="text" ng-model="$ctrl.oneWay">
+  </div>
+</fieldset>
 <div ng-if="$ctrl.showTesterCmp">
   <my-tester
     my-tester-attr
+    one-way="$ctrl.oneWay"
     two-way="$ctrl.twoWay"
     in-one="$ctrl.cmpTester.model"
     attr-one="{{ $ctrl.cmpTester.interpolate }}"

diff --git a/playground/app/components/todo-item.component.ts b/playground/app/components/todo-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output } from 'ng-metadata/core';
+import { Component, Input, Output, OnChanges } from 'ng-metadata/core';
 import { TodoModel } from '../stores/todoStore.service';
 
 @Component({
@@ -8,14 +8,25 @@ import { TodoModel } from '../stores/todoStore.service';
     transclude: true
   }
 })
-export class TodoItemCmp{
+export class TodoItemCmp implements OnChanges{
 
   @Input('<') todo: TodoModel;
   @Input('<') idx: number;
   @Output() onDone: ( todo: {todo:TodoModel} )=>void;
 
   ngOnInit(){}
 
+  ngOnChanges(change){
+    console.log('changes:', change);
+    if(change.todo){
+      console.log('first todo change?', change.todo.isFirstChange());
+    }
+    if(change.idx){
+      console.log('first idx change?', change.idx.isFirstChange());
+    }
+
+  }
+
   done(todo: TodoModel) {
 
     this.onDone( { todo } );

diff --git a/playground/style.css b/playground/style.css
@@ -40,3 +40,9 @@ tabs ng-transclude{
   background-color: coral;
   padding: .4rem;
 }
+my-tester{
+  display: block;
+  margin:.5rem;
+  padding: 1rem;
+  box-shadow: 1px 1px 1rem #ccc;
+}