Scenario #1 and #2 documented.

Author: Dotneteer

public/docs/_examples/component-communication/send-job-request/package.json

@@ -15,7 +15,7 @@
   "author": "Istvan Novak",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-alpha.45",
+    "angular2": "2.0.0-alpha.46",
     "systemjs": "0.19.2"
   },
   "devDependencies": {

public/docs/_examples/component-communication/send-job-request/src/app/app.ts

@@ -5,7 +5,7 @@ import {HeroJobBoard} from './hero-job-board';
   selector: 'hero-job-app',
   template: `
       <h1>Hero Job Application</h1>
-      <hero-job-board />
+      <hero-job-board></hero-job-board>
   `,
   styles: [`
       hero-job-board {

public/docs/_examples/component-communication/steal-job/package.json

@@ -77,7 +77,7 @@ import {Hero} from './hero';
     providers: [JobService]
 })
 export class HeroJobBoard{
-    constructor(public jobService: JobService) {
+    constructor(private jobService: JobService) {
         jobService.post(null);
      }
 

public/docs/_examples/component-communication/steal-job/src/app/app.ts

@@ -10,18 +10,18 @@ import {JobService} from './job-service';
             <h3 class='hero-name'>Job Request for {{hero.name}}</h4>
             <h4 class=job-request
                 [class.announced]='request'
-                [class.taken]='taken'>
+                [class.undertaken]='undertaken'>
                 {{getRequest()}}
             </h4>
             <h2 *ng-if='winner'
-                [class.won]='taken && winner==hero'
-                [class.lost]='taken && winner!=hero'
-                [class.else]='!taken'>
+                [class.won]='undertaken && winner==hero'
+                [class.lost]='undertaken && winner!=hero'
+                [class.else]='!undertaken'>
                 {{finalState}}
             </h2>
-            <button [disabled]="taken"
+            <button [disabled]="!request || undertaken"
                 [hidden]='winner'
-                (click)='takeJob()'>
+                (click)='undertakeJob()'>
                 I'll take it!
             </button>
         </div>
@@ -47,7 +47,7 @@ import {JobService} from './job-service';
             border: 2px solid red;
             background-color: #ffdddd;
         }
-        .taken {
+        .undertaken {
             color: blue;
             border: 2px solid blue;
             background-color: #ddddff;
@@ -76,35 +76,35 @@ import {JobService} from './job-service';
 export class InvitedHero {
     @Input() hero: Hero;
     request: string;
-    taken: boolean;
+    undertaken: boolean;
     winner: Hero;
 
     constructor(private jobService: JobService) {
-        jobService.jobPostEvent.toRx()
-        .subscribe(request => {
-            this.request = request;
-            this.taken = false;
-            this.winner = null; 
-        });
-        jobService.jobAssignedEvent.toRx()
-        .subscribe(winner => {
-            this.winner = winner;
-        });
+        jobService.jobPostEvent.subscribe(
+            request => {
+                this.request = request;
+                this.undertaken = false;
+                this.winner = null; 
+            });
+        jobService.jobAssignedEvent.subscribe(
+            winner => {
+                this.winner = winner;
+            });
     }
 
     getRequest() {
         return this.request
           ? this.request : "No job announced";
     }
 
-    takeJob() {
+    undertakeJob() {
         this.jobService.take(this.hero);
-        this.taken = true;
+        this.undertaken = true;
     }
 
     get finalState() {
         if (!this.winner) return "No winner announced yet."
-        if (!this.taken) return "Job taken."
+        if (!this.undertaken) return "Job taken."
         return this.winner == this.hero
             ? "I won the job !!!"
             : "I lost the job :-(";

public/docs/_examples/component-communication/take-job-antipattern/package.json

@@ -18,8 +18,8 @@ export class JobService {
         return this._assignedTo;
     }
 
-    jobPostEvent = new EventEmitter();
-    jobAssignedEvent = new EventEmitter();
+    jobPostEvent = new EventEmitter<string>();
+    jobAssignedEvent = new EventEmitter<Hero>();
 
     post(jobRequest: string) {
         this._jobRequest = jobRequest;

public/docs/_examples/component-communication/take-job-antipattern/src/app/app.ts

@@ -15,7 +15,7 @@
   "author": "Istvan Novak",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-alpha.45",
+    "angular2": "2.0.0-alpha.46",
     "systemjs": "0.19.2"
   },
   "devDependencies": {

public/docs/_examples/component-communication/take-job-event/package.json

@@ -0,0 +1,22 @@
+// #docregion
+import {bootstrap, Component} from 'angular2/angular2';
+import {HeroJobBoard} from './hero-job-board';
+
+@Component({
+  selector: 'hero-job-app',
+  template: `
+      <h1>Hero Job Application</h1>
+      <hero-job-board></hero-job-board>
+  `,
+  styles: [`
+      hero-job-board {
+          border: 2px dashed lightgray;
+          display: block;
+      }
+  `],
+  directives: [HeroJobBoard]
+})
+class HeroJobApp { }
+
+bootstrap(HeroJobApp);
+// #enddocregion

public/docs/_examples/component-communication/take-job-event/src/app/app.ts

@@ -1,8 +1,10 @@
+// #docregion imports
 import {Component, CORE_DIRECTIVES} from 'angular2/angular2';
 import {InvitedHero} from './invited-hero';
 
 import {Hero} from './hero';
-
+// #enddocregion imports
+// #docregion annotations
 @Component({
     selector: 'hero-job-board',
     template: `
@@ -57,6 +59,8 @@ import {Hero} from './hero';
         InvitedHero,
         CORE_DIRECTIVES]
 })
+// #enddocregion annotations
+// #docregion component
 export class HeroJobBoard{
     heroes: Hero[] = [
         new Hero(11, "Mr. Nice"),
@@ -76,4 +80,5 @@ export class HeroJobBoard{
       this.heroes[5]
     ];
     invitedHeroes: Hero[] = this.heroes;
-}
+}
+// #enddocregion component

public/docs/_examples/component-communication/assign-job/package.json renamed to public/docs/_examples/component-communication/ts/assign-job/package.json

@@ -0,0 +1,7 @@
+// #docregion
+export class Hero {
+    constructor(
+      public id: number,
+      public name: string) {}
+}
+// #enddocregion

public/docs/_examples/component-communication/assign-job/src/app/app.ts renamed to public/docs/_examples/component-communication/ts/assign-job/src/app/app.ts

@@ -1,3 +1,4 @@
+// #docregion
 import {Component} from 'angular2/angular2';
 
 @Component({
@@ -28,4 +29,5 @@ import {Component} from 'angular2/angular2';
     `]
 })
 export class InvitedHero {
-}
+}
+// #enddocregion