Angular 2 Component inputs and outputs (formerly properties and events)

Angular 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:

It now needs to be rewritten like this:

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.

  • Diego Vieira

    blog title should be “Angular 2 Component inputs and outputs” I think?

  • juristr

    These are the same I guess as using @Input or @Output annotations with TypeScript, right?

    • https://ng-book.com/2 Fullstack.io

      — Please reply above this line —

      Approve

      FELIPE COURY from Fullstack.io

    • Lars Jeppesen

      Yes

  • Eugene

    What’s the difference between @Input or @Output and Component inputs and outputs. What is prefer?