How to share data between two different components?

Question

i'm trying to share a list of selected items from a component to an other one. i created a service to declare the list :

  public selectedTasksToUnassign = [];

then in this component i try to set the list values:

component_1.ts

checkTask(task) {
if (task) {
  if (this.selectedTasks.includes(task)) {
    this.selectedTasks.splice(this.selectedTasks.indexOf(task), 1);
  } else {
    this.selectedTasks.push(task);
  }
} else {
  if (this.selectedTasks.length < this.tasks.length) {
    this.selectedTasks = [];
    Array.prototype.push.apply(this.selectedTasks, this.tasks);
  } else {
    this.selectedTasks = [];
  }
}
this.tasksToSelect.emit(this.selectedTasks);
this.formService.selectedTasksToUnassign=this.selectedTasks;
console.log("task to unassign from table", this.formService.selectedTasksToUnassign);
  }

and in this component i want to get the list : component_2.ts

 ngOnInit() {
console.log("test tasks to unassign",this.formService.selectedTasksToUnassign);
 }

in fact im seeing that everytime i check an item in my table the liste is updated in the console.log in component_1.ts and im seeying the values are added but in the console.log in component_2.ts , it shows me only the first value selected !!!

Answer 1

That's because (I'm assuming) you're invoking checkTask() each time you interact with the task list. Because checkTask() includes the console.log, you're seeing it with every interaction in component_1.

However, on component_2 you have a console.log on the ngOnInit() which runs only once when the component is loaded. That's why you only see the first console.log.

If you bind formService.selectedTaskToUnassign to component_2's template, you will see that it updates every time component_1 mutates its value.

component_2.component.ts

// Assuming that a task is a string
public tasksToUnassign: string[];

// Setup a local reference to the service property inside your constructor
constructor(private formService:FormService){
  this.tasksToUnassign = this.formService.selectedTasksToUnassign;
}

component_2.component.html

<ul>
  <!-- Use *ngFor to loop through each item of an array -->
  <li *ngFor="let task of tasksToUnassign">{{ task }}</li>
</ul>

Answer 2

This is because the service is using a regular value. If you want the values to update on every change. You need to use observables to hold the value.

And then in component_2.ts, you will subscribe to the value

Shared Service

  public selectedTasksToUnassignSubject = new Behaviour Subject<Array<Tasks>>([]);

This will keep the value of selectedTasksToUnassignSubject inside a behaviour Subject. Any component that wants to read it's value can subscribe to it. So whenever, the behaviour subject updates, all the subscribers would get updated.

Updating Behaviour Subject Inside Component 1

service.selectedTasksToUnassignSubject.next(tasks);

Subscribing To The Value Of The Behaviour Subject

service.selectedTasksToUnassignSubject.subscribe(data=>{
//Code To Run Whenever the value of task changes
})

I can imagine rxjs getting quite confusing especially if you're just starting out with angular. But they are super useful and you will grow to love them once you understand how they work.