agualar : update component when Global variable changes

Issue

I have an angular app in which I have some global variables.

Globals.ts

export class Globals {

    public static Vendors= new Map();


    public static Parts: Part[];
}

The "Parts" variable is updated via a Service. I want to know if it is possible to update a component automatically when "Parts" is updated.

Details for context:

The app have 2 components , one for vendor and other for parts. here is a general architecture of the app.

Vendor data is loaded on app load and I have no problem with it. The vendor list component contains a table, and each vendor row child component is a tr. The Part list is similar - ie contains a table within which Part row child is loaded as tr.

When a cell in Vendor row is clicked, a service method is called which updates the "Parts" property in Globals class (globals.ts shown above) - using data from web api call

Question: How will it be possible to update the part list component - add part rows corresponding to "Parts" - when "Parts" is changed in Globals class?

more info:

I am new to angular and this is my first app.

Right now, what I do is to use @Input/@Output to emit an event from "Vendor row" to "vendor list" to "app". Then get the Parts data and send to part list and then fill the part rows. While this is working, it is too cumbersome. I am hoping there is a better way.

I did not add any code here because it already contains the code in @input/@Output method. But if code is required, please let me know.

As I mentioned, I am new to angular and I am learning while creating this app. Kindly add some example, or I might not be able to understand the angular terminology

Solution

First of all, avoid having a Globals file at all costs. You can have constants, but not data that's changing during the app lifecycle.

There are two ways you can approach this:

• Your app.component has two fields: a Vendors[] and a Parts[]. It fetches all vendors and, when one is clicked, it fetches the corresponding parts and assigns them to the field. The Parts[] field is being passed as an input to the parts-list.component that will then render that data.

• If you want to avoid using @Input (although it makes sense here), you could have a service that deals with the logic for these components. So the app.component oninit would tell the service to load the data, and the service would have the same two fields: a Vendors[] and a Parts[]. This time they would need to be Observables. Whenever a vendor is clicked, the component would tell the service to load the corresponding parts. That way, both the app.component and parts-list.component would be able to subscribe to the corresponding fields and render their data every time it changes.

Would love to see an implementation of yours with these tips and discuss it further, if needed.

Note: @Input/@Output is not cumbersome if used well. It looks like it does make sense in this case, so I think this would be your best option.

Answered By - Leonardo Freire