angular 40output 28 29

1/* @Output()
2- allows data to flow from the child class to the parent class
3- normally initialized with EventEmitter
4*/ 
5
6// Parent Component
7import { Component } from '@angular/core'
8@Component({
9  selector: app-component,
10  template: 
11  `
12  <app-item-output (newItemEvent)='addItem($event)'> </app-item-output>
13  <ul>
14      <li *ngFor='let item of items'>{{item}}</li>
15  </ul>
16  `
17  /* Template Notes
18  	- (newItemEvent)='addItem($event)' --  the event binding 
19      tells Angular to connect the event in the child 
20      component, newEventItem, to the method in the parent, 
21      addItem(), and that the event that the child is 
22      notifying the parent of is to be the argument of the 
23      method. 
24     - $event contains the data that the child component is 
25       passing to the parent.
26  */
27 }) 
28 export class AppComponent {
29 	items = ['item1', 'item2', 'item3'];
30
31	addItem(newItem: string){
32    	this.items.push(newItem);
33	}
34	/* Class Notes
35		- `[item]` -- @Input() target from child
36        - `currentItem` -- property from parent
37        - `(deleteRequest)` -- the target @Output event from 
38           child
39        - `crossOffItem($event)` -- method from parent;	    
40    */
41 }
42
43  
44// Child Component
45import { Output, EventEmitter } from '@angular/core';
46        
47@Component({
48    selector: app-item-output,
49    template: 
50    `
51        <label>Add an item: <input #newItem></label>
52        <button (click)='addNewItem(newItem.value)'>Add to parent's list</button>
53    `
54  	/* Template Notes
55    	- #newItem stores whatever is typed into the input
56        - (click) event is bound to addNewItem method and 
57          passes newItem.value to the component class
58    */
59})
60
61export class ItemOutputComponent {
62    @Output() newItemEvent = new EventEmitter<string>();
63	
64    addNewItem(value: string) {
65        // this method emits the value of newItemEvent
66        this.newItemEvent.emit(value);
67    }
68
69	/* Component Class Notes
70    	- @Output marks the property as a way for data to go
71          from the child component to the parent component
72        - newItemEvent is the name of the @Output
73        - new EventEmitter<string>() -- tells Angular to create
74          a new event emitter of type string
75        - addNewItem(value: string) -- when the user clicks the 
76          button the child component lets the parent component
77          know about the event and gives the data to the parent.
78    */
79}
80
81

1@Component({...})
2export class CounterComponent {
3
4  @Input()
5  count: number = 0;
6
7  @Output()
8  change: EventEmitter<number> = new EventEmitter<number>();
9
10  increment() {
11    this.count++;
12    this.change.emit(this.count);
13  }
14
15  decrement() {
16    this.count--;
17    this.change.emit(this.count);
18  }
19
20  	// in parent component
21	//(change)="countChange($event)"> 
22
23}
24