Delegation EventEmitter or Observable in Angular

Question

I am trying to implement something like a delegation pattern in Angular   When the user clicks on a nav-item  I would like to call a function which then emits an event which should in turn be handled by some other component listening for the event   Here is the scenario  I have a Navigation component     import  Component  Output  EventEmitter  from  angular2 core     Component          other properties left out for brevity     events     navchange         template          lt div class  nav-item   click   selectedNavItem 1   gt  lt  div gt            export class Navigation         Output   navchange  EventEmitter lt number gt    new EventEmitter         selectedNavItem item  number            console log  selected nav item     item           this navchange emit item             Here is the observing component    export class ObservingComponent         How do I observe the event          lt ----------Observe Register Event  -------- gt     public selectedNavItem item  number        console log  item index changed              The key question is  how do I make the observing component observe the event in question

User · Answer

you can use BehaviourSubject as described above or there is one more way:

you can handle EventEmitter like this: first add a selector

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
// other properties left out for brevity
selector: 'app-nav-component', //declaring selector
template:`
  <div class="nav-item" (click)="selectedNavItem(1)"></div>
`
 })

 export class Navigation {

@Output() navchange: EventEmitter<number> = new EventEmitter();

selectedNavItem(item: number) {
    console.log('selected nav item ' + item);
    this.navchange.emit(item)
}

}

Now you can handle this event like let us suppose observer.component.html is the view of Observer component

<app-nav-component (navchange)="recieveIdFromNav($event)"></app-nav-component>

then in the ObservingComponent.ts

export class ObservingComponent {

 //method to recieve the value from nav component

 public recieveIdFromNav(id: number) {
   console.log('here is the id sent from nav component ', id);
 }

 }

User · Answer

You need to use the Navigation component in the template of ObservingComponent   dont t forget to add a selector to Navigation component    navigation-component for ex     lt navigation-component  navchange   onNavGhange  event   gt  lt  navigation-component gt    And implement onNavGhange   in ObservingComponent  onNavGhange event      console log event       Last thing    you don t need the events attribute in  Componennt  events     navchange

User · Answer

I found out another solution for this case without using Reactivex neither services  I actually love the rxjx API however I think it goes best when resolving an async and or complex function  Using It in that way  Its pretty exceeded to me   What I think you are looking for is for a broadcast  Just that  And I found out this solution     lt app gt     lt app-nav  selectedTab   onSelectedTab  event   gt  lt  app-nav gt            This component bellow wants to know when a tab is selected           broadcast here is a property of app component    lt app-interested  broadcast   broadcast  gt  lt  app-interested gt   lt  app gt     Component class App      broadcast  EventEmitter lt tab gt       constructor          this broadcast   new EventEmitter lt tab gt              onSelectedTab tab         this broadcast emit tab                 Component class AppInterestedComponent implements OnInit      broadcast  EventEmitter lt Tab gt         doSomethingWhenTab tab                             ngOnInit          this broadcast subscribe  tab    gt  this doSomethingWhenTab tab             This is a full working example  https   plnkr co edit xGVuFBOpk2GP0pRBImsE

User · Answer

Update 2016-06-27  instead of using Observables  use either   a BehaviorSubject  as recommended by  Abdulrahman in a comment  or a ReplaySubject  as recommended by  Jason Goemaat in a comment   A Subject is both an Observable  so we can subscribe   to it  and an Observer  so we can call next   on it to emit a new value    We exploit this feature   A Subject allows values to be multicast to many Observers   We don t exploit this feature  we only have one Observer       BehaviorSubject is a variant of Subject   It has the notion of  the current value    We exploit this  whenever we create an ObservingComponent  it gets the current navigation item value from the BehaviorSubject automatically   The code below and the plunker use BehaviorSubject   ReplaySubject is another variant of Subject  If you want to wait until a value is actually produced  use ReplaySubject 1   Whereas a BehaviorSubject requires an initial value  which will be provided immediately   ReplaySubject does not   ReplaySubject will always provide the most recent value  but since it does not have a required initial value  the service can do some async operation before returning it s first value   It will still fire immediately on subsequent calls with the most recent value  If you just want one value  use first   on the subscription   You do not have to unsubscribe if you use first        import  Injectable       from   angular core  import  BehaviorSubject  from  rxjs BehaviorSubject     Injectable   export class NavService        Observable navItem source   private  navItemSource   new BehaviorSubject lt number gt  0        Observable navItem stream   navItem    this  navItemSource asObservable         service command   changeNav number        this  navItemSource next number             import  Component     from   angular core   import  NavService    from    nav service   import  Subscription  from  rxjs Subscription     Component     selector   obs-comp     template   obs component  item    item       export class ObservingComponent     item  number    subscription Subscription    constructor private  navService NavService       ngOnInit         this subscription   this  navService navItem          subscribe item   gt  this item   item        ngOnDestroy            prevent memory leak when component is destroyed     this subscription unsubscribe               Component     selector   my-nav     template        lt div class  nav-item   click   selectedNavItem 1   gt nav 1  click me  lt  div gt       lt div class  nav-item   click   selectedNavItem 2   gt nav 2  click me  lt  div gt      export class Navigation     item   1    constructor private  navService NavService       selectedNavItem item  number        console log  selected nav item     item       this  navService changeNav item           Plunker    Original answer that uses an Observable   it requires more code and logic than using a BehaviorSubject  so I don t recommend it  but it may be instructive   So  here s an implementation that uses an Observable instead of an EventEmitter   Unlike my EventEmitter implementation  this implementation also stores the currently selected navItem in the service  so that when an observing component  is created  it can retrieve the current value via API call navItem    and then be notified of changes via the navChange  Observable   import  Observable  from  rxjs Observable   import  rxjs add operator share   import  Observer  from  rxjs Observer    export class NavService     private  navItem   0    navChange   Observable lt number gt     private  observer  Observer    constructor         this navChange    new Observable observer   gt        this  observer   observer  share           share   allows multiple subscribers       changeNav number        this  navItem   number      this  observer next number         navItem         return this  navItem          Component     selector   obs-comp     template   obs component  item    item       export class ObservingComponent     item  number    subscription  any    constructor private  navService NavService       ngOnInit         this item   this  navService navItem        this subscription   this  navService navChange  subscribe        item   gt  this selectedNavItem item          selectedNavItem item  number        this item   item        ngOnDestroy         this subscription unsubscribe            Component     selector   my-nav     template        lt div class  nav-item   click   selectedNavItem 1   gt nav 1  click me  lt  div gt       lt div class  nav-item   click   selectedNavItem 2   gt nav 2  click me  lt  div gt          export class Navigation     item number    constructor private  navService NavService       selectedNavItem item  number        console log  selected nav item     item       this  navService changeNav item           Plunker    See also the Component Interaction Cookbook example  which uses a Subject in addition to observables   Although the example is  parent and children communication   the same technique is applicable for unrelated components

User · Answer

Breaking news  I ve added another answer that uses an Observable rather than an EventEmitter   I recommend that answer over this one   And actually  using an EventEmitter in a service is bad practice     Original answer   don t do this   Put the EventEmitter into a service  which allows the ObservingComponent to directly subscribe  and unsubscribe  to the event   import  EventEmitter  from  angular2 core    export class NavService     navchange  EventEmitter lt number gt    new EventEmitter      constructor        emit number        this navchange emit number         subscribe component  callback           set  this  to component when callback is called     return this navchange subscribe data   gt  call callback component  data            Component     selector   obs-comp     template   obs component  index    index       export class ObservingComponent     item  number    subscription  any    constructor private navService NavService       this subscription   this navService subscribe this  this selectedNavItem         selectedNavItem item  number        console log  item index changed    item       this item   item        ngOnDestroy         this subscription unsubscribe            Component     selector   my-nav     template        lt div class  nav-item   click   selectedNavItem 1   gt item 1  click me  lt  div gt          export class Navigation     constructor private navService NavService       selectedNavItem item  number        console log  selected nav item     item       this navService emit item           If you try the Plunker  there are a few things I don t like about this approach    ObservingComponent needs to unsubscribe when it is destroyed we have to pass the component to subscribe   so that the proper this is set when the callback is called   Update  An alternative that solves the 2nd bullet is to have the ObservingComponent directly subscribe to the navchange EventEmitter property   constructor private navService NavService       this subscription   this navService navchange subscribe data   gt       this selectedNavItem data        If we subscribe directly  then we wouldn t need the subscribe   method on the NavService   To make the NavService slightly more encapsulated  you could add a getNavChangeEmitter   method and use that   getNavChangeEmitter     return this navchange        in NavService  constructor private navService NavService        in ObservingComponent    this subscription   this navService getNavChangeEmitter   subscribe data   gt       this selectedNavItem data

User · Answer

You can use either    Behaviour Subject    BehaviorSubject is a type of subject  a subject is a special type of observable which can act as observable and observer  you can subscribe to messages like any other observable and upon subscription  it returns the last value of the subject emitted by the source observable   Advantage  No Relationship such as parent-child relationship required to pass data  between components   NAV SERVICE  import  Injectable       from   angular core  import  BehaviorSubject  from  rxjs BehaviorSubject     Injectable   export class NavService     private navSubject    new BehaviorSubject lt number gt  0      constructor              Event New Item Clicked   navItemClicked navItem  number        this navSubject  next number            Allowing Observer component to subscribe emitted data only   getNavItemClicked         return this navSubject  asObservable            NAVIGATION COMPONENT   Component     selector   navbar-list     template        lt ul gt         lt li gt  lt a  click   navItemClicked 1   gt Item-1 Clicked lt  a gt  lt  li gt         lt li gt  lt a  click   navItemClicked 2   gt Item-2 Clicked lt  a gt  lt  li gt         lt li gt  lt a  click   navItemClicked 3   gt Item-3 Clicked lt  a gt  lt  li gt         lt li gt  lt a  click   navItemClicked 4   gt Item-4 Clicked lt  a gt  lt  li gt       lt  ul gt     export class Navigation     constructor private navService NavService       navItemClicked item  number        this navService navItemClicked item           OBSERVING COMPONENT   Component     selector   obs-comp     template   obs component  item    item       export class ObservingComponent     item  number    itemClickedSubcription any    constructor private navService NavService       ngOnInit          this itemClickedSubcription   this navService                                        getNavItemClicked                                         subscribe                                          item   gt  this selectedNavItem item                                                  selectedNavItem item  number        this item   item         ngOnDestroy         this itemClickedSubcription unsubscribe            Second Approach is Event Delegation in upward direction child - gt  parent   Using  Input and  Output decorators parent passing data to child component and child notifying parent component   e g Answered given by  Ashish Sharma

User · Answer

If one wants to follow a more Reactive oriented style of programming  then definitely the concept of  Everything is a stream  comes into picture and hence  use Observables to deal with these streams as often as possible

[angular] Delegation: EventEmitter or Observable in Angular

Examples related to angular

Examples related to observer-pattern

Examples related to observable

Examples related to eventemitter

Examples related to event-delegation