ng4 - task 02

//In my code, newItem is only local, i don't see any reason to expose it outside the class.

//Sorry for long file names, i used ng g c CartComponent  :/

//cart-component.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
 selector: 'app-cart-component',
 templateUrl: './cart-component.component.html',
 styleUrls: ['./cart-component.component.css']
})
export class CartComponentComponent {
 @Input() items: Array<string>;
 @Output() addItem = new EventEmitter<string>();
 newItem: string;
 onNewItem(event) {
 this.newItem = event.target.value;
 }
 onAddNewItem() {
 this.addItem.emit(this.newItem);
 }
}

//cart-component.component.html
<div>
 <h1>Shopping Cart</h1>
 New Item: <input type="text" (input)="onNewItem($event)" />
 <button (click)="onAddNewItem($event)">Add Item</button>
</div>

//app.component.html
<app-cart-component [items]="initialArray" (addItem)="onItemAdded($event)"></app-cart-component>

//app.component.ts
...
export class AppComponent {
 initialArray = ['Apples', 'Bananas', 'Cherries'];
onItemAdded(newItem) {
 this.initialArray.push(newItem);
 console.log(this.initialArray);
 }
}