3

I am building the clone of a website/app called Kualitee.com. It is a test-management tool used by QA Engineers. In kualitee, you have multiple projects, with test cases and members. You can add, delete, and change projects and members. There is a header on top which enables you to select a project of which you want the data of i.e test cases and stuff.

the header for changing projects

The approach I used for this is as follow:

1. one service containing all the data

2. one service containing only the project selected...

The whole app uses the data found in the second service. When I make a change in a project, say add a new member, it does display that at that time. After that, if I change the project in the select at the top to another project, the component containing that member does not change, even though the project is a different one now, but as soon as I switch to another component, through routing, and back again, the changes are there.

My point is, is there any way I can add functionality where, if a parent component changes an object in service, the change reflects in a child component also using that same object in that same service, without me needing to change components or refresh.

PS. This is my first time asking something on StackOverflow, Sorry if my question is confusing.

Mohammad Mirzaeyan
  • 845
  • 3
  • 11
  • 30
Sarmad Hadi
  • 57
  • 8

2 Answers2

2

You probably need an observable shared service to share the data between components. Here is how to achieve that: Interaction between components using a service

seidme
  • 12,543
  • 5
  • 36
  • 40
1

I think you are referred to Angular life cycle https://angular.io/guide/lifecycle-hooks

Kavinda Senarathne
  • 1,813
  • 13
  • 15
  • I checked it out, and it worked perfectly. Just needed to add a ngAfterContentChecked function to update the data recieved from the service. Thanks a lot, not sure why lifecycle methods did not come to mind... – Sarmad Hadi Nov 14 '20 at 18:53