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

angular

Solution

`@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.

Problem

Original source