feat(playground): add examples with EventEmitter

ngParty · Apr 20, 2016 · c977ff5 · c977ff5
1 parent 9c6170e
commit c977ff5
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 7 deletions.
diff --git a/playground/app/components/todo-app.component.ts b/playground/app/components/todo-app.component.ts
@@ -70,6 +70,10 @@ export class TodoAppCmp{
     this.items.push(newId);
   }
 
+  outputWithEmitReceiver( sentence: string ) {
+    console.log( sentence );
+  }
+
 
   directive = {
     example: {

diff --git a/playground/app/components/todo-app.html b/playground/app/components/todo-app.html
@@ -9,8 +9,10 @@ <h3>Todo List remaining: {{ $ctrl.todos | remainingTodos }}</h3>
 
     <todo-item
       todo="item"
-      on-done="$ctrl.markAsDone(todo)"
-      idx="$index">
+      on-done="$ctrl.markAsDone($event)"
+      emit-test="$ctrl.outputWithEmitReceiver($event)"
+      idx="$index"
+    >
       <button
         ng-click="$ctrl.removeTodo(item)"
         class="mdl-button mdl-js-button mdl-button--accent">

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, OnChanges } from 'ng-metadata/core';
+import { Component, Input, Output, OnChanges, EventEmitter } from 'ng-metadata/core';
 import { TodoModel } from '../stores/todoStore.service';
 
 @Component({
@@ -12,9 +12,19 @@ export class TodoItemCmp implements OnChanges{
 
   @Input('<') todo: TodoModel;
   @Input('<') idx: number;
-  @Output() onDone: ( todo: {todo:TodoModel} )=>void;
+  // this is old way how to bindings are created, will be removed in 2.0
+  // @Output() onDone: ( todo: {todo:TodoModel} )=>void;
+  @Output() onDone: EventEmitter<TodoModel>;
+  @Output() emitTest = new EventEmitter<string>();
 
-  ngOnInit(){}
+  ngOnInit(){
+
+    const dispose = this.onDone.subscribe( (value)=> {
+      console.log( `onDone emitted value: ${value}` );
+      dispose();
+    } )
+
+  }
 
   ngOnChanges(change){
     console.log('changes:', change);
@@ -27,9 +37,13 @@ export class TodoItemCmp implements OnChanges{
 
   }
 
+  callEmit(){
+    this.emitTest.emit( 'hello from eventEmitter instance!' );
+  }
+
   done(todo: TodoModel) {
 
-    this.onDone( { todo } );
+    this.onDone.emit( todo );
 
   }
 

diff --git a/playground/app/components/todo-item.html b/playground/app/components/todo-item.html
@@ -9,7 +9,7 @@
     class="mdl-checkbox__input"
     ng-model="$ctrl.todo.complete"
     ng-change="$ctrl.done($ctrl.todo)">
-  <span class="mdl-checkbox__label">{{ $ctrl.todo.label }}</span>
+  <span class="mdl-checkbox__label" ng-click="$ctrl.callEmit()">{{ $ctrl.todo.label }}</span>
 
 </label>
 <ng-transclude></ng-transclude>
diff --git a/playground/ng-metadata.legacy.d.ts b/playground/ng-metadata.legacy.d.ts
@@ -513,6 +513,16 @@ declare module ngMetadataCore{
    * unidirectional data flow).
    */
   export function enableProdMode(): void;
+
+  export class EventEmitter<T> {
+    /**
+     * Creates an instance of [EventEmitter], which depending on [isAsync],
+     * delivers events synchronously or asynchronously.
+     */
+    constructor(isAsync?: boolean);
+    emit(value: T): void;
+    subscribe(generatorOrNext?: Function, error?: any, complete?: any): Function;
+  }
 }
 
 declare module ngMetadataCommon {