What is subscribe/@Output/@input in event emitter?

Question

I am new to Angular2 and I'd like to know what are:

1. Subscribe
2. @Output
3. @input

In event emitter in Angular2? And how I can use them in Angular?

Answer 1

We use Input and Output Decorators to Pass information from one Component to Another like parent and Child like up the stream or downward. The information that is passed is passed in the form of Observables from rxjs.

Next we call subscribe on this Observable which allows us to listen in on any data that is coming through. In subscribing we use three distinctive callbacks: the first one is invoked when receiving new values, the second for any errors that arise and the last represents the function to be invoked when the sequence of incoming data is complete and successful.

With Regard to the Use of Input output take a look @ this link

https://rahulrsingh09.github.io/AngularConcepts/#/inout

In this example we pass information from Parent to Child using Event Emitters and Observe the Changes that happen in component and when the values changes we subscribe to the changes this is all taken care by Rxjs.

The code for the Same can be found on the link

https://github.com/rahulrsingh09/AngularConcepts/tree/master/src/app/parentchild

Use of Subscribe like in case of http calls where we get stream of data and subscribe to it.

Subscribe.

 this.weatherService.getLukeSkywalkerObservable().subscribe(res => {
        this.lsObservable = res;
    });

where the getLukeSkywalkerObservable is a service call

getLukeSkywalkerObservable(){
      return this.http.get('https://swapi.co/api/people/1/')
              .map(res => {
                 return  res.json(); // using maps to filter data returned form the http call
              }).map(data => {
                return data; // using maps of maps to filter data returned form the map
        }).flatMap((jedi) => this.http.get(jedi.homeworld))
          .map(res => {
           return res.json().name; // using flat maps to combine data returned from two observables into one
          }).catch((error:any) => Observable.throw(error.json().error || 'Server error'));

      //switchMap is very similar to flatMap, but with a very important distinction.
    // Any events to be merged into the trunk stream are ignored if a new event comes in.
  }

One Update 

If you are Lokking to pass inforamtion between component make use of this answer by @MarkRajcok.

Delegation: EventEmitter or Observable in Angular2 where he has defined why to use Behavior Subject or Replay Subject instead of Event Emitters

Answer 2

Subscribe

subscribe in Angular 2

---

@Inputs and @Outputs

• Those two properties that can be passed to the @Component decorator to implement the downward and upward flow of data: “inputs” and “outputs.” These have sometimes been confusing because in earlier version of the Angular 2 alpha, they were called “properties” (for “inputs”) and “events” (for “outputs”) and some developers were less than enthralled with the name change, though it does seem to make sense: https://github.com/angular/angular/pull/4435.

• So Inputs, as you might guess from the hierarchy discussion above, specifies which properties you can set on a component whereas outputs identifies the events a component can fire to send information up the hierarchy to its parent