AngularJS communication between two components

Hi.

I'm writing an SPA using angularJS and so far I have created two distinct components for the app one called loginModal and the other one listFiles.

In the html I call them like

<login-modal></login-modal>
<list-files></list-files>

On init of the loginModal component, I check if there is a valid JWT token stored and if not I ask for login. If the login is successful the modal closes and the JWT token is being stored. Along with the JWT also a string defining a directory path (for that specific user) is retrieved from the server.

Now what I want to achieve after a successful login, is to somehow trigger a method inside the listFiles component to make a call to the API using the directory string taken before.

Is something like this possible? Can someone provide me with some info resources on how to do such a thing?

Also, any other idea is welcome.

Thank you.

Comments

[Zilu Ramkrishna Rane]

RxJS comes with concept of Subject.
You can look at below article for more details.
hackernoon.com/subjects-in-angular...
In our project we used Subject to pass value from One Component to Another.

[nikolaof]

Can this be used with AngularJS (1.x) ? Because I'm only seeing references with Angular2

[Zilu Ramkrishna Rane]

I never tried AngularJS(1.x) So, not sure about practicality of above solution here.
You can have a try.