What is the difference betwen @Input and @Output in Angular2

Question

I am just learning Angular2 and I came across @Input and @Output. What is the difference between the two.

Answer 1

@Input() is to pass data In to the component

class ChildComponent {
  @Input() data;
}

@Component({
  template: `<child [data]="parentData"></child>
})
class ParentComponent {
  parentData;
}

Here ParentComponent is passing data to the child by the @Input() property. The [data] is the same name as the property in the child component. If you want to use a different name than the property name, then you can use @Input('diff-name')

@Output is to emit data (events) Out from a component

class ChildComponent {
  @Output() dataChange = new EventEmitter();

  click() {
    dataChange.emit('new Value');
  }
}

@Component({
  template: `<child (dataChange)="onDataChange($event)"></child>
})
class ParentComponent {

  onDataChange(event) {
    console.log(event);
  }
}

Here ChildComponent has an @Output that it emits events to. The parent is listening and passes a callback to the (dataChange). Now every time the child emits an event, the parent callback will be called passing the event.

Answer 2

For AngularJS, we can exchange data by $scope, parent scope and root scope, but not Angular. I think @Input is very easy, so let me focus @Output.

Usually, we can use Service sync data between any components.

import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class OneService {
  public oneSubject: Subject<Object> = new Subject<Object>();
}
//And we can use it in component
export class ComponentA {
  public dataFromService = null;
  constructor(private oneService: OneService) {
    this.oneService.subscribe(data => this.dataFromService = data);
  }
}
//We also can emit changes from other object
export class ComponetB {
  public oneData = false;
  constructor(private oneService: OneService) {
  }
  onChange() {
    this.oneService.next(this.oneData);
  }
}

So, @Output to simplify above logic between parent/children components.

Warning: It is not mean @Output equal subject/subscribe, only make helpful about how to understand output.