Angular hot observables with RxJS: Changes on array are not emitted to subscribers

Issue

I have a small task board like trello with tasks to be done, doing and done. All the tasks are stored on 3 separate arrays in one service called TaskService. To show the task and change task state I have implemented angular's cdk drag n drop.

My goal now is to subscribe to the the task arrays so when the array changes send the changes to an api. For now I'm just trying to console.log the events but I'm not understanding what's happening it seemly to work but I can't get the arrays updates.

This is my component controller:

doing: any[];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.getTodoTasks();
    // this.getDoingTasks();
    this.getDoneTasks();

    const obs$ = this.taskService.getDoing();

    obs$.subscribe({
      next: (data: any[]) => {
        this.doing = data;
        console.log(data);
      },
    });
  }

  todo: any[];
  // doing: Subscriber<any[]>;
  done: any[];
  newTaskText: string = '';

  isModalShown: boolean = false;

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer == event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

  newTask() {
    console.log(`Click Modal!`);
    this.isModalShown
      ? (this.isModalShown = false)
      : (this.isModalShown = true);
  }

  getTodoTasks() {
    this.taskService.getTodos().subscribe((data) => {
      this.todo = data;
      console.log(`Se ha añadido Tak a : Todo`);
    });
  }

This is my view:

<app-modal *ngIf="isModalShown" (close)="newTask()">
  <div class="modalContent">
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      class="newTask"
      [(ngModel)]="newTaskText"
    ></textarea>
    <div class="modalButtons">
      <input
        type="button"
        value="Cancel"
        class="btn btn-secondary"
        (click)="cancelTask()"
      />
      <input type="button" value="Save" class="btn btn-primary" (click)="saveTask()" />
    </div>
  </div>
</app-modal>

<div class="container">
  <div class="list">
    <h2>TO DO</h2>
    <input type="button" value="Modal" (click)="newTask()" />
    <div
      class="tasks"
      cdkDropList
      #todoList="cdkDropList"
      [cdkDropListData]="todo"
      [cdkDropListConnectedTo]="[doingList, doneList]"
      (cdkDropListDropped)="drop($event)"
    >
      <div class="task" *ngFor="let item of todo" cdkDrag>{{ item }}</div>
    </div>
  </div>
  <div
    class="list"
    cdkDropList
    #doingList="cdkDropList"
    [cdkDropListData]="doing"
    [cdkDropListConnectedTo]="[doneList, todoList]"
    (cdkDropListDropped)="drop($event)"
  >
    <h2>DOING</h2>
    <div class="tasks">
      <div class="task" *ngFor="let item of doing" cdkDrag>{{ item }}</div>
    </div>
  </div>
  <div
    class="list"
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[doingList, todoList]"
    (cdkDropListDropped)="drop($event)"
  >
    <h2>DONE</h2>
    <div class="tasks">
      <div class="task" *ngFor="let item of done" cdkDrag>{{ item }}</div>
    </div>
  </div>
</div>

And my service:

constructor() {}

  todo = ['task 1', 'task 2', 'task 3'];
  doing = [];
  done = [];

  getTodos(): Observable<any[]> {
    return of(this.todo);
  }

  getDoing(): Observable<any[]> {
    return new Observable((subscriber) => {
      subscriber.next();
    })
  }

  getDone(): Observable<any[]> {
    return of(this.done);
  }

I've been doing some tries and I couldn't manage to get a console.log on my terminal when a new element is added to any of the array through the drag n drop.

Solution

I couldn’t find any solution so instead I added an id parameter to the drop areas so I can identify the drop area destination and then implement my logic.

If anyone finds out what’s missing in my code I’ll update the question with the right solution.

Answered By - jcobo1