Why is `@input` decorator preferred over `inputs:[]`

Question

There are two ways to define an input on a component:

@Component({
    inputs: ['displayEntriesCount'],
    ...
})
export class MyTable implements OnInit {
    displayEntriesCount: number;

and this

@Component({
   ...
})
export class MyTable implements OnInit {
    @Input() displayEntriesCount: number;

I would assume that the first approach is better since it explicitly declares component's dependencies without the need to inspect complements class. However, this article by the renowned developer states that the second approach is preferable:

Using @Input is a preferred approach, however we don’t have to use it.

Any ideas why?

Answer 1

It's somehow preferred by the style guide, but there are no strong arguments. Perhaps because the properties and methods are kept together with the binding. But your argument also is valid. Some prefer the one, some the other.

If you prefer host: ... then just use it. It's still quite common.

Answer 2

Per angular style guide https://angular.io/docs/ts/latest/guide/style-guide.html#!#-a-id-05-12-a-decorate-input-and-output-properties-inline

Decorate Input and Output Properties Inline

Do use @Input and @Output instead of the inputs and outputs properties of the @Directive and@Component` decorators:

Do place the @Input() or @Output() on the same line as the property they decorate.

• Why? It is easier and more readable to identify which properties in a class are inputs or outputs.

• Why? If you ever need to rename the property or event name associated with @Input or @Output, you can modify it a single place.

• Why? The metadata declaration attached to the directive is shorter and thus more readable.

• Why? Placing the decorator on the same line makes for shorter code and still easily identifies the property as an input or output.