Again about global data in Angular2

Question

If my angular2 app looks like this, and blonde on the top going to talk with ginger on right-middle, should they organize a party for it?

Emit events, use inputs an outputs - this is angular2 way? Data should flow from child to parent to the root, and then from parent to child to the point? I'm new here and often I would like to have some global object where I can keep some information that all components need to know. When data changes in that global object it should be magically change in all other services and components that it injected. For example user login/logout, or if he click on button and so on.

import {Injectable} from 'angular2/core';

@Injectable()
export object Globals {
    logged: false,
    showThatDiv: true
}

But I read somewhere that it is Angular1, not Angular2 way. Is it right? Or I'm wrong? It's not looks like global soup, just global state's object.

For example now I have this structure:

|-root
  |-google api component
    |-google auth
    |-youtube api
      |-playlists
      |-video
  |-myComponent
    |-sub1
      |-sub2
        |-sub3
  |...

mySub1 component need to know if user logged and if so show (*ngIf) some div in sub2. Or from mySub3 component call checkGauth() in googleAuth service. From mySub2 component add video to YouTube playlist and onAdded show results in sub2, or from sub3 create new playlist and show it on sub2. A lot of variants.

I'm tired to write code for all of it. It make it more complex. And sometimes thinking about do this:

 |-root
   |-google api component
   |-google auth
   |-youtube api
   |-playlists
   |-video
   |-myComponent
   |-sub1
   |-sub2
   |-sub3
   |...

Now i won't be able to think of angular2 without thinking of goats...thanks >_> — cdvv7788
As usual, it depends... your question is too broad. When you say "when data changes... it should change in all other ... components" -- do the components need to be notified, or does the data only need to change? I.e., do you need the components to do something, like call a function when the data changes, or do you only need the their views to update, which Angular will do for you automatically? I suggest you ask a more specific question, or maybe a couple of questions. — Mark Rajcok

C B C B · Accepted Answer · 2016-02-04T02:25:35

Building Services for each of your APIs is a great way of isolating components from being muddled up together. In your case you need to build a GoogleService it can hold your context on the current state the application is running. Services are Inject-able to your components when and where they are needed.

Having said that there is no fine line we can draw in some cases. In those cases,

Message Passing, Pass the data through your components, in your case, if you parent knows about Login and the child wants to know about Login, Pass it through and the bindings will keep it updated for your to reliably use it on your child components.
Create a Helper that encapsulates all your functions related to your feature. Reference it using the old fashion import and use it on your components.

Emit events, use inputs an outputs - this is angular2 way?

Yes, it is the best way to know what your components need and components emit. But this is not hard, Two-Way Data binding let you get this working with minimal effort.

Data should flow from child to parent to the root, and then from parent to child to the point?

Let the child get the data from the Parent via Inputs and return an output as callbacks, Checkout this Blog to see how it is done on a real world app.

Hope it helps to get you started. Welcome to Angular 2 you will love it here !

Again about global data in Angular2

1 Answers