4

In a @component,

What are the @input and @output properties stands for and uses of those?

What are directives and why we have to put directives like below structure?

directives:[CORE_DIRECTIVES, FORM_DIRECTIVES]

It would be nice if someone can tell me the difference between @input and directives.

Rezoan
  • 1,745
  • 22
  • 51

2 Answers2

10

In short:

@Input is used for component's tag's attributes.

@Output is used for component's tag's events.

Think of an HTML input:

<input type="button" onclick="doSomething($event)" ></input>

The input's type attribute is telling the component how will it render and behave, as a button, as a text input, etc... If you were to use a similar attribute, you'd use the @Input annotation because you want to insert info into your component.

The input's onclick attribute/event is considered in Angular 2 an @Ouput property, because it sends info as an $event object to external components that might use it.

See: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#inputs-outputs

Like Chibi mentioned you no longer do:

directives:[CORE_DIRECTIVES, FORM_DIRECTIVES]

in order to use them.

Leo Gerber
  • 485
  • 6
  • 15
Langley
  • 5,326
  • 2
  • 26
  • 42
  • 1
    When you want to use a directive in Angular 2, you have to specify the Component that defines those directives. `CORE_DIRECTIVES` and `FORM_DIRECTIVES` are a list of directives so you can include them at once. My guess is `CORE_DIRECTIVES` used to include the core functionality directives like `ngFor`, `ngIf`, `ngModel`, etc, while `FORM_DIRECTIVES` included directives like `ngControl`, `ngForm`, etc. But again, since Beta they don't have a use anymore. – Langley Jan 20 '16 at 15:50
2

You don't need to use them any more, That was an old model used on the Alpha versions. Now you just need to include it on the import statement and that should be enough.

Check this tutorial that was written with beta and you will see that the CORE_DIRECTIVES and FORM_DIRECTIVES are not used any more.

Angular One Framework Tutorial

Angular 2 Developer Guide for Forms

C B
  • 1,964
  • 14
  • 13