Angular 2 Sibling Component Communication

Question

I have a ListComponent   When an item is clicked in ListComponent  the details of that item should be shown in DetailComponent   Both are on the screen at the same time  so there s no routing involved   How do I tell DetailComponent what item in ListComponent was clicked   I ve considered emitting an event up to the parent  AppComponent   and have the parent set the selectedItem id on DetailComponent with an  Input   Or I could use a shared service with observable subscriptions     EDIT  Setting the selected item via event    Input doesn t trigger the DetailComponent  though  in case I were to need to execute additional code   So I m not sure this is an acceptable solution     But both of these methods seem far more complex than the Angular 1 way of doing things which was either through  rootScope  broadcast or  scope  parent  broadcast   With everything in Angular 2 being a component  I m surprised there s not more information out there about component communication   Is there another more straightforward way to accomplish this

User · Answer

There is a discussion about it here   https   github com angular angular io issues 2663  Alex J s answer is good but it no longer works with current Angular 4 as of July  2017   And this plunker link would demonstrate how to communicate between siblings using shared service and observable   https   embed plnkr co P8xCEwSKgcOg07pwDrlO

User · Answer

One way to do this is using a shared service    However I find the following solution much simpler  it allows to share data between 2 siblings  I tested this only on Angular 5    In you parent component template    lt  -- Assigns  AppSibling1Component  instance to variable  data  -- gt   lt app-sibling1  data gt  lt  app-sibling1 gt   lt  -- Passes the variable  data  to AppSibling2Component instance -- gt   lt app-sibling2  data   data  gt  lt  app-sibling2 gt     app-sibling2 component ts  import   AppSibling1Component   from     app-sibling1 app-sibling1 component        export class AppSibling2Component              Input   data  AppSibling1Component

User · Answer

Shared service is a good solution for this issue  If you want to store some activity information too  you can add Shared Service to your main modules  app module  provider list   NgModule       imports                           bootstrap            AppComponent            declarations            AppComponent             providers            SharedService                         Then you can directly provide it to your components  constructor private sharedService  SharedService     With Shared Service you can either use functions or you can create a Subject to update multiple places at once   Injectable   export class SharedService       public clickedItemInformation  Subject lt string gt    new Subject        In your list component you can publish clicked item information  this sharedService clikedItemInformation next  quot something quot     and then you can fetch this information at your detail component  this sharedService clikedItemInformation subscribe  information    gt           do something      Obviously  the data that list component shares can be anything  Hope this helps

User · Answer

Behaviour subjects  I wrote a blog about that    import   BehaviorSubject   from  rxjs BehaviorSubject   private noId   new BehaviorSubject lt number gt  0      defaultId   this noId asObservable     newId urlId     this noId next urlId         In this example i am declaring a noid behavior subject of type number  Also it is an observable  And if  something happend  this will change with the new     function    So  in the sibling s components  one will call the function  to make the change  and the other one will be affected by that change  or vice-versa    For example  I get the id from the URL and update the noid from the behavior subject    public getId        const id    this route snapshot paramMap get  id       return id      ngOnInit    void     const id    this getId      this taskService newId id       And from the other side  I can ask if that ID is  what ever i want  and make a choice after that  in my case if i want to delte a task  and that task is the current url  it have to redirect me to the home    delete task  Task   void        we save the id   cuz after the delete function  we  gonna lose it    const oldId   task id     this taskService deleteTask task          subscribe task   gt      we call the defaultId function from task service          this taskService defaultId   here we are subscribed to the urlId  which give us the id from the view task                    subscribe urlId   gt                this urlId   urlId                     if  oldId    urlId                         Location call   home                     this router navigate    home

User · Answer

Here is simple practical explanation Simply explained here  In call service ts  import   Observable   from  rxjs   import   Subject   from  rxjs Subject     Injectable   export class CallService    private subject   new Subject lt any gt       sendClickCall message  string        this subject next   text  message          getClickCall    Observable lt any gt        return this subject asObservable           Component from where you want to call observable to inform another component that button is clicked  import   CallService   from           services call service    export class MarketplaceComponent implements OnInit  OnDestroy     constructor public Util  CallService            buttonClickedToCallObservable        this Util sendClickCall  Sending message to another comp that button is clicked            Component where you want to perform action on button clicked on another component  import   Subscription   from  rxjs Subscription   import   CallService   from           services call service     ngOnInit       this subscription   this Util getClickCall   subscribe message   gt      this message   message    console log  ---button clicked at another component---        call you action which need to execute in this component on button clicked           import   Subscription   from  rxjs Subscription   import   CallService   from           services call service     ngOnInit       this subscription   this Util getClickCall   subscribe message   gt      this message   message    console log  ---button clicked at another component---        call you action which need to execute in this component on button clicked           My understanding clear on components communication by reading this  http   musttoknow com angular-4-angular-5-communicate-two-components-using-observable-subject

User · Answer

I have been passing down setter methods from the parent to one of its children through a binding  calling that method with the data from the child component  meaning that the parent component is updated and can then update its second child component with the new data  It does require binding  this  or using an arrow function though    This has the benefit that the children aren t so coupled to each other as they don t need a specific shared service   I am not entirely sure that this is best practice  would be interesting to hear others views on this

User · Answer

This is not what you exactly want but for sure will help you out  I m surprised there s not more information out there about component communication  lt    consider this tutorial by angualr2  For sibling components communication  I d suggest to go with sharedService  There are also other options available though   import  Component bind  from  angular2 core   import  bootstrap  from  angular2 platform browser   import  HTTP PROVIDERS  from  angular2 http   import  NameService  from  src nameService     import  TheContent  from  src content   import  Navbar  from  src nav      Component     selector   app     directives   TheContent Navbar     providers   NameService     template    lt navbar gt  lt  navbar gt  lt thecontent gt  lt  thecontent gt        export class App     constructor         console log  App started           bootstrap App        Please refer to link at top for more code   Edit  This is a very small demo  You have already mention that you have already tried with sharedService  So please consider this tutorial by angualr2 for more information

User · Answer

I also like to do the communication between 2 siblings via a parent component via input and output   it handles OnPush change notification better than using a common service  Or just use NgRx Store  Example   Component       selector   parent       template    lt div gt  lt notes-grid               Notes   quot  NotesList    async  quot               selectedNote   quot ReceiveSelectedNote  event  quot           lt  notes-grid gt           lt note-edit               gridSelectedNote   quot  SelectedNote    async  quot           lt  note-edit gt  lt  div gt        styleUrls      parent component scss      export class ParentComponent           create empty observable     NotesList   Observable lt Note   gt    of lt Note   gt           SelectedNote   Observable lt Note gt    of lt Note gt            passed from note-grid for selected note to edit      ReceiveSelectedNote selectedNote  Note        if  selectedNote     null               change value direct subscribers or async pipe subscribers will get new value          this SelectedNote    of lt Note gt  selectedNote                     used in subscribe next   to http call response   Left out all that code for brevity   This just shows how observable is populated      onNextData n  Note     void          Assign to Obeservable direct subscribers or async pipe subscribers will get new value      this NotesList    of lt Note   gt  n NoteList      json from server            child 1 sibling  Component     selector   note-edit     templateUrl     note-edit component html      just a textarea for noteText and submit and cancel buttons    styleUrls      note-edit component scss      changeDetection  ChangeDetectionStrategy OnPush    export class NoteEditComponent implements OnChanges      Input   gridSelectedNote  Note       constructor               used to capture  Input changes for new gridSelectedNote input ngOnChanges changes  SimpleChanges         if  changes gridSelectedNote  amp  amp  changes gridSelectedNote currentValue     null                this noteText   changes gridSelectedNote currentValue noteText        this noteCreateDtm   changes gridSelectedNote currentValue noteCreateDtm        this noteAuthorName   changes gridSelectedNote currentValue noteAuthorName                    child 2 sibling   Component       selector   notes-grid       templateUrl     notes-grid component html      just an html table with notetext  author  date     styleUrls      notes-grid component scss        changeDetection  ChangeDetectionStrategy OnPush    export class NotesGridComponent       the not currently selected fromt eh grid      CurrentSelectedNoteData  Note          list for grid      Input   Notes  Note            selected note of grid sent out to the parent to send to sibling       Output   readonly selectedNote  EventEmitter lt Note gt    new EventEmitter lt Note gt          constructor                   use when you need to send out the selected note to note-edit via parent using output- gt  input       EmitSelectedNote        this selectedNote emit this CurrentSelectedNoteData                 here just so you can see what it looks like   export interface Note       noteText  string      noteCreateDtm  string      noteAuthorName  string

User · Answer

A directive can make sense in certain situations to  connect  components  In fact the things being connected don t even need to be full components  and sometimes it s more lightweight and actually simpler if they aren t   For example I ve got a Youtube Player component  wrapping Youtube API  and I wanted some controller buttons for it  The only reason the buttons aren t part of my main component is that they re located elsewhere in the DOM   In this case it s really just an  extension  component that will only ever be of use with the  parent  component  I say  parent   but in the DOM it is a sibling - so call it what you will   Like I said it doesn t even need to be a full component  in my case it s just a  lt button gt   but it could be a component     Directive       selector    ytPlayerPlayButton      export class YoutubePlayerPlayButtonDirective         player  YoutubePlayerComponent         Input  ytPlayerVideo       private set player value  YoutubePlayerComponent           this  player   value                  HostListener  click   click             this  player play              constructor private elementRef  ElementRef              the button itself          In the HTML for ProductPage component  where youtube-player is obviously my component that wraps the Youtube API    lt youtube-player  technologyVideo videoId  NuU74nesR5A  gt  lt  youtube-player gt       lots more DOM       lt button class  play-button                  ytPlayerPlayButton          ytPlayerVideo   technologyVideo  gt Play lt  button gt    The directive hooks everything up for me  and I don t have to declare the  click  event in the HTML   So the directive can nicely connect to the video player without having to involve ProductPage as a mediator   This is the first time I ve actually done this  so not yet sure how scalable it might be for much more complex situations  For this though I m happy and it leaves my HTML simple and responsibilities of everything distinct

User · Answer

Updated to rc 4  When trying to get data passed between sibling components in angular 2  The simplest way right now  angular rc 4  is to take advantage of angular2 s hierarchal dependency injection and create a shared service   Here would be the service   import  Injectable  from   angular core     Injectable   export class SharedService       dataArray  string              insertData data  string           this dataArray unshift data             Now  here would be the PARENT component  import  Component  from   angular core   import  SharedService  from    shared service   import  ChildComponent  from    child component   import  ChildSiblingComponent  from    child-sibling component    Component       selector   parent-component       template             lt h1 gt Parent lt  h1 gt           lt div gt               lt child-component gt  lt  child-component gt               lt child-sibling-component gt  lt  child-sibling-component gt           lt  div gt             providers   SharedService       directives   ChildComponent  ChildSiblingComponent     export class parentComponent        and its two children  child 1  import  Component  OnInit  from   angular core   import  SharedService  from    shared service    Component       selector   child-component       template             lt h1 gt I am a child lt  h1 gt           lt div gt               lt ul  ngFor   data in data  gt                   lt li gt   data   lt  li gt               lt  ul gt           lt  div gt           export class ChildComponent implements OnInit      data  string             constructor          private  sharedService  SharedService          ngOnInit   any           this data   this  sharedService dataArray            child 2  It s sibling   import  Component  from  angular2 core   import  SharedService  from    shared service    Component       selector   child-sibling-component       template             lt h1 gt I am a child lt  h1 gt           lt input type  text    ngModel    data   gt           lt button  click   addData    gt  lt  button gt           export class ChildSiblingComponent      data  string    Testing data       constructor          private  sharedService  SharedService        addData            this  sharedService insertData this data           this data                 NOW  Things to take note of when using this method    Only include the service provider for the shared service in the PARENT component and NOT the children  You still have to include constructors and import the service in the children This answer was originally answered for an early angular 2 beta version  All that has changed though are the import statements  so that is all you need to update if you used the original version by chance

User · Answer

You need to set up the parent-child relationship between your components  The problem is that you might simply inject the child components in the constructor of the parent component and store it in a local variable  Instead  you should declare the child components in your parent component by using the  ViewChild property declarator  This is how your parent component should look like   import   Component  ViewChild  AfterViewInit   from   angular core   import   ListComponent   from    list component   import   DetailComponent   from    detail component     Component     selector   app-component     template    lt list-component gt  lt  list-component gt  lt detail-component gt  lt  detail-component gt      directives   ListComponent  DetailComponent     class AppComponent implements AfterViewInit      ViewChild ListComponent  listComponent ListComponent     ViewChild DetailComponent  detailComponent  DetailComponent     ngAfterViewInit            afther this point the children are set  so you can use them     this detailComponent doSomething            https   angular io docs ts latest api core index ViewChild-var html  https   angular io docs ts latest cookbook component-communication html parent-to-view-child  Beware  the child component will not be available in the constructor of the parent component  just after the ngAfterViewInit lifecycle hook is called  To catch this hook simple implement the AfterViewInit interface in you parent class the same way you would do with OnInit   But  there are other property declarators as explained in this blog note  http   blog mgechev com 2016 01 23 angular2-viewchildren-contentchildren-difference-viewproviders

User · Answer

In case of 2 different components  not nested components  parent child grandchild   I suggest you this      MissionService     import   Injectable   from   angular core   import   Subject      from  rxjs Subject     Injectable    export class MissionService        Observable string sources   private missionAnnouncedSource   new Subject lt string gt       private missionConfirmedSource   new Subject lt string gt          Observable string streams   missionAnnounced    this missionAnnouncedSource asObservable      missionConfirmed    this missionConfirmedSource asObservable         Service message commands   announceMission mission  string        this missionAnnouncedSource next mission         confirmMission astronaut  string        this missionConfirmedSource next astronaut               AstronautComponent      import   Component  Input  OnDestroy   from   angular core   import   MissionService   from    mission service   import   Subscription     from  rxjs Subscription    Component     selector   my-astronaut     template         lt p gt          astronaut     lt strong gt   mission   lt  strong gt         lt button          click   confirm             disabled    announced    confirmed  gt          Confirm        lt  button gt       lt  p gt         export class AstronautComponent implements OnDestroy      Input   astronaut  string    mission     lt no mission announced gt      confirmed   false    announced   false    subscription  Subscription    constructor private missionService  MissionService        this subscription   missionService missionAnnounced  subscribe        mission   gt            this mission   mission          this announced   true          this confirmed   false                confirm         this confirmed   true      this missionService confirmMission this astronaut         ngOnDestroy            prevent memory leak when component destroyed     this subscription unsubscribe               Source  Parent and children communicate via a service

[javascript] Angular 2 Sibling Component Communication

Examples related to javascript

Examples related to angular

Examples related to typescript