Angular Component inputs and outputs (formerly properties and events)

Reading Time: 1 minuteAngular version 2.0.0-alpha.39 was just released. Angular 2 has been moving fast in the last few months and there’s one major API change that you really should know about:

Components now have inputs and outputs

Probably the biggest change to Angular in this version is that @Component attributes properties and events have been renamed to inputs and outputs respectively.

So for instance, if you had a component like this:

 selector: 'my-component',
 properties: ['product'],
 events: ['onAdd']

It now needs to be rewritten like this:

 selector: 'my-component',
 inputs: ['product'],
 outputs: ['onAdd']

This change has been pretty controversial, but I think it makes a lot of sense.

In previous versions of our book, in the "How Angular Works" section describing "Properties and Events" we said:

There are two more major concepts we need to be aware of to use components: property bindings and event bindings.

Data flows in to your component via property bindings and flows out of your component through event bindings.

Think of the set of property bindings + event bindings as defining the public API of your component.

It’s great to see this change because whenever we would go to describe what these fields do, we describe them in terms of inputs and outputs.

That said, not everyone agrees and there is some lively discussion about this change on Github.

But as far as we’re concerned, this is a great change and I’m happy to see it in.