@Input/Output

http://www.syntaxsuccess.com/viewarticle/input-and-output-in-angular-2.0

@Input

The purpose of @Input is to configure data bound input properties with support for change tracking. Basically it is the Angular 2.0 way to inject values directly into a component via property bindings in the DOM.

La idea es reutilizar componentes y pasarse datos entre ellos. En este ejemplo mostramos como un componente A que tiene la lógica, hace uso de un componente B para mostrar las acciones de A.

showcounter.component.ts

@Component({
    selector: 'showcounter',
    template: require('./showcounter.component.html')

})
export class ShowUserComponent {

    @Input() counter: number = 5;   
}

showcounter.component.html

<h3>Show number of count</h3>
<div>
    Counter: {{counter}}
</div>

counter.component.ts

export class CounterComponent {

    count = 0;

    addCount() {
        this.count++;
    }    
}

counter.component.html

h3>Apreta el boton para sumar!</h3>
<button (click)="addCount()">Add Count</button> {{count}}
<showcounter
    [counter]="count" >
</showcounter>

@Output

... coming soon...