Update instructions with @input @output exercise

Author: sebawita

Warmup.pptx

@@ -351,8 +351,6 @@ export class MyComponent implements OnInit {
         map(res => res.data)
       );
   }
-
-  }
 }
 ```
 
@@ -655,170 +653,198 @@ export class CocktailItemComponent {
 
 Now if you reload the app and select an ingredient, the app should work as before, but this time you have nice separation of how the Drinks ListView should present each item.
 
-### To be continued here!!!!!!!
-
 ### Components with custom events
 
-Adding a custom event to a component is easy. Let's have a look at `LeagueTableComponent` as an example.
-
-To make it work we need first to create an `EventEmitter`:
+Adding a custom event - like a `(tap)` event - to a component is easy.<br/>
+This is done by adding an `EventEmitter` property with an `@Output` decorator. 
+Like this:
 
 ``` javascript
-@Output() teamSelected: EventEmitter<number> = new EventEmitter<number>();
+@Component({
+  selector: 'team-selector'
+  ...
+})
+export class TeamSelectorComponent {
+  @Output() teamSelected: EventEmitter<number> = new EventEmitter<number>();
+}
 ```
 
-Note that this is made of 3 parts:
+This automatically means that our component, will have an event called `(teamSelected)`, which should be emitting *numbers*. And can be used like this (note that $event will pass the numbers emitted by the event).
+
+``` XML
+<team-selector (teamSelected)="doSomething($event)"></team-selector>
+```
 
- * @Output - decorator
- * teamSelected - eventName
- * EventEmitter<number> - EventEmitter with the type of output
 
-Then every time we want to trigger the event, we can call `emit(value)` on `this.teamSelected`. Just like this:
+#### Emitting values
+
+To make your component emit values, you just call `.emit(value)` on your event emitter. Like this (see `onTeamChanged()`):
 
 ``` javascript
-onTeamSelect(event) {
-  const selectedTeamId = this.table.standing[event.index].teamId;
-  console.log('::LeagueTableComponent::onTeamSelect::' + selectedTeamId);
-  this.teamSelected.emit(selectedTeamId);
+@Component({
+  selector: 'team-selector'
+  ...
+})
+export class TeamSelectorComponent {
+  @Output() teamSelected: EventEmitter<number> = new EventEmitter<number>();
+
+  onTeamChanged(teamId) {
+    this.teamSelected.emit(teamId);
+  }
 }
 ```
 
-Obviously there must be something that actually triggers `onTeamSelect`. In this case this is done by the `<ListView>`
-
-``` XML
-<ListView [items]="table?.standing" class="list-group" (itemTap)="onTeamSelect($event)">
-```
+This way, every time the `TeamSelectorComponent` calls `onTeamChanged`, this will result in the emitter triggering the `(teamSelected)` event.
 
-All this means that everywhere we use `<my-league-table>` we can now add a handler for `teamSelected` like this (see `tables.component.html`):
+In the case of the below example, this will result in calling `doSomething()` with the `$event` value equal to  `teamId`.
 
 ``` XML
-<my-league-table [competitionId]="PremierLeagueId" (teamSelected)="onTeamTap($event)"></my-league-table>
+<team-selector (teamSelected)="doSomething($event)"></team-selector>
 ```
 
-Note that `$event` will contain the value passed into `emit`, in this case this will be a `teamId`.
+### Components with custom input (two-way binding)
+<!--https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html#creating-custom-two-way-data-bindings-->
 
-### Exercise: Creating a presentation component with @Output
+To create a custom attribute that is capable of both taking data as an input and also updating it, we need to use two-way binding.
 
-In this exercise we need to update the app, so that if the user taps on a team in the league table, the app should navigate to `TeamComponent` with `teamId` of that team.
+To do that we need to combine the power of the `@Input` and `@Output` decorators.
 
-Even though you could make it happen by adding `[nsRouterLink]` on each team standing, we want the navigation logic to be delegated to the parent component, so it should be the `TablesComponent` that should trigger the navigation.
+Let's imagine we are working on a `ColorPicker` component, which should take a `color`, as an input, but when the user selects a different color, it should provide an updated value.
 
-> So in short: when the user taps on a team, we need the `LeagueTableComponent` to emit `teamSelected` with the `teamId`. And the `TablesComponent` should intercept the `teamSelected` event and call `onTeamSelected` where it should navigate to the `TeamComponent`.
+First we need to create a property `@Input color`.
 
-<h4 class="exercise-start">
-  <b>Exercise</b>: Update LeagueTableComponent with @Output
-</h4>
+Then we need to add a custom event, which is called `propertyNameChange`. For our example we’ll use `@Output() colorChange`.
 
-#### Step 1 - Add @Output EventEmitter
+Finally, we need to emit the new value `colorChange.emit(newColor);`
 
-Add an `EventEmitter<number>` called `teamSelected` to your `LeagueTableComponent` in `league-table.component.ts`.
+Here is the full code:
 
-<div class="solution-start"></div>
 ``` javascript
-@Output() teamSelected: EventEmitter<number> = new EventEmitter<number>();
+@Component({
+  selector: 'color-picker',
+  templateUrl: './color-picker/color-picker.component.html'
+})
+export class ColorPickerComponent {
+  @Input color: string;
+  @Output() colorChange = new EventEmitter<string>();
+
+  onColorPick(newColor: string) {
+    colorChange.emit(newColor);
+  }
+}
 ```
-<div class="solution-end"></div>
 
-#### Step 2 - Emit value
+Please note that `@Input` could be also used with a `getter` and `setter`.
 
-Update the `onTeamSelected` function, so that it `emits` the `teamSelected` event with the `teamId`
+Now you can use the `ColorPickerComponent` like this:
 
-<div class="solution-start"></div>
+``` XML
+<color-picker [(color)]="selectedColorFromParentClass"></color-picker>
+```
 
-``` javascript
-onTeamSelected(event) {
-  const selectedTeamId = this.table.standing[event.index].teamId;
-  console.log('::LeagueTableComponent::onTeamSelect::' + selectedTeamId);
 
-  this.teamSelected.emit(selectedTeamId);
-}
+### Exercise: Creating a presentation component with @Input @Output
+
+In this exercise we need to update the `CocktailsComponent` to replace the first StackLayout that is used for finding an ingredient, and instead use the `SearchComponent`, like this:
+
+``` XML
+<search-ingredient row="0" 
+    [(ingredient)]="selectedIngredient"
+    (ingredientChange)="updateCocktailList($event)">
+</search-ingredient>
 ```
 
-<div class="solution-end"></div>
+The `SearchComponent` already contains most of the logic required to load a list of ingredients, and filter them as the user types in the TextField.
 
-#### Step 3 - Call OnTeamSelect from the UI
+Your task is to update the `SearchComponent`, so that it allows:
 
-Now we need the `ListView` in `league-table.component.html` to call `onTeamSelected` whenever the user taps on one of the teams. 
-`ListView` has an event `itemTap` which does precisely that.
+* two way binding to `[(ingredient)]`,
+* emitting selected ingredient via `(ingredientChange)`
 
-Add `(itemTap)="onTeamSelected($event)"` to the `ListView`.
+> Hint: Both of these task can be accomplished by adding `@Input()` and `@Output()` to `search.component.ts`. Make sure to also `emit()` ingredients via the emitter.
 
-<div class="solution-start"></div>
+<h4 class="exercise-start">
+  <b>Exercise</b>: Update LeagueTableComponent with @Output
+</h4>
 
-ListView first line
+#### Step 0 - Switch to use SearchComponent
+
+You can start by commenting out the code in `cocktails.component.html` that is between:
 
 ``` XML
-<ListView [items]="table?.standing" class="list-group" (itemTap)="onTeamSelected($event)">
+<!-- Ingredient Search <start> -->
+   code
+<!-- Ingredient Search <end> -->
 ```
 
-<div class="solution-end"></div>
-
-#### Step 4
-Now the `LeagueTableComponent` is ready to emit a `teamId` each time user taps on it. We just need to take it and navigate to the `TeamComponent`.
+Uncomment the `<search-ingredient>` code, to use the `SearchComponent` instead.
 
-The `onTeamTap` function in `tables.component.ts` already has a logic to navigate to the `TeamComponent` with a specified `teamId`.
+Then also comment out the code in `cocktails.component.ts` that is between:
 
-``` javascript
-private onTeamTap(teamId: number) {
-  console.log('::TablesComponent::onTeamTap::' + teamId);
-  this.router.navigate(['/football/team', teamId]);
-}
+```javascript
+/* Ingredient Search <start> */
+   code
+/* Ingredient Search <end> */
 ```
 
-We just need to update each of the `<my-league-table>` tag to bind to the `(teamSelected)` event and call `onTeamTap`
+#### Step 1 - Add @Input() to ingredient
 
-> **HINT**: Don't forget to pass `$event` to `teamSelected`.
+Add `@Input()` decorator to the `ingredient` property to the `SearchComponent` in `search.component.ts`.
 
 <div class="solution-start"></div>
-``` XML
-<my-league-table [competitionId]="PremierLeagueId" (teamSelected)="onTeamTap($event)"></my-league-table>
+``` javascript
+@Input() ingredient: string;
 ```
 <div class="solution-end"></div>
 
-#### Step 5
+#### Step 2 - Add @Output EventEmitter
 
-Test the app to see if this works.
+Add an `EventEmitter<number>` called `ingredientChange`.
 
-Now upon tapping on a team in the table you should be redirected to a team view, which should display fixtures for that given team.
+This will work as `(ingredientChange)` event, but also it will enable two-way binding on the `ingredient` property.
 
-<div class="exercise-end"></div>
+<div class="solution-start"></div>
+``` javascript
+@Output() ingredientChange = new EventEmitter<string>();
+```
+<div class="solution-end"></div>
 
-### Components with custom input (two-way binding)
-<!--https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html#creating-custom-two-way-data-bindings-->
+#### Step 3 - Emit value
 
-To create a custom attribute that is capable of both taking data as an input and also updating it, we need to use two-way binding.
+Update the `selectIngredient` function, so that it `emits` the `ingredientChange` event with the `val`.
 
-To do that we need to combine the power of the `@Input` and `@Output` decorators.
+<div class="solution-start"></div>
 
-Let's imagine we are working on a `ColorPicker` component, which should take a `color`, as an input, but when the user selects a different color, it should provide an updated value.
+``` javascript
+public selectIngredient(val: string) {
+  this.ingredientChange.emit(val);
+}
+```
 
-First we need to create a property `@Input color`.
+<div class="solution-end"></div>
 
-Then we need to add a custom event, which is called `propertyNameChange`. For our example we’ll use `@Output() colorChange`.
+#### Step 3 - Call selectIngredient from the UI
 
-Finally, we need to emit the new value `colorChange.emit(newColor);`
+Now we need the selected `Label` in the ListView in `search.component.html` to call `selectIngredient` whenever the user taps on one of the ingredients. 
 
-Here is the full code:
+Add `(tap)="selectIngredient(item)"` to the `Label` inside the ListView.
 
-``` javascript
-@Component({
-  selector: 'color-picker',
-  templateUrl: './color-picker/color-picker.component.html'
-})
-export class ColorPickerComponent {
-  @Input color: string;
-  @Output() colorChange = new EventEmitter<string>();
+<div class="solution-start"></div>
 
-  onColorPick(newColor: string) {
-    colorChange.emit(newColor);
-  }
-}
+``` XML
+<Label 
+  [text]="item"
+  class="list-group-item" [class.selected]="ingredient === item"
+  (tap)="selectIngredient(item)">
+</Label>
 ```
 
-Please note that `@Input` could be also used with a `getter` and `setter`.
+<div class="solution-end"></div>
 
-Now you can use the `ColorPickerComponent` like this:
+#### Step 4
 
-``` XML
-<color-picker [(color)]="selectedColorFromParentClass"></color-picker>
-```
+Test the app to see if this works.
+
+Now upon tapping on a team in the table you should be redirected to a team view, which should display fixtures for that given team.
+
+<div class="exercise-end"></div>

docs/chapters/chapter5.md

@@ -5,8 +5,8 @@
   <ListView [items]="ingredients$ | async" class="list-group" height="100%">
     <ng-template let-item="item">
       <StackLayout>
-        <Label [text]="item" class="list-group-item" [class.selected]="ingredient === item"
-          (tap)="selectIngredient(item)"></Label>
+        <Label [text]="item" class="list-group-item" [class.selected]="ingredient === item">
+        </Label>
       </StackLayout>
     </ng-template>
   </ListView>