Maximus Maximus - 15 days ago 9
Javascript Question

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

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

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.

Comments