Angular: input/output decorators

app.component.html

<div *ngFor="let person of persons">
  <app-person [data]="person" (upVote)="upVote(person, $event)"></app-person>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'app works!!!';
  persons;

  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.persons = this.dataService.getPersons();
  }

  upVote(person, inc) {
    person.points += inc;
  }

}

person.component.html

Person! {{ data.name }}: {{ data.points }}
<button (click)="upVoteClick(1)">Up Vote!</button>
<button (click)="upVoteClick(10)">Up Vote +10!</button>

person.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {

  @Input() data;

  @Output() upVote = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  upVoteClick(inc) {
    this.upVote.emit(inc);
  }

}