How to detect change from one component into other

Question

Angular 4. Github source

I have a menu which is filled by a web service. The web service is in taskService, but is not necessary now.

ngOnInit() {
             


        

Answer 1

Angular isn't running changeDetection because you aren't asking it to. None of the instance variables in your ViewTaskComponent are being updated inside your save method.

In your code, after updateTask() finishes, it returns to save() in your ViewTaskComponent. But there is no link to this.task in the subscription callback to this.taskService.updateTask().

Since updateTask uses a PATCH request, I'm assuming you're not getting the whole Task object back. So you won't be able to just say this.task = valuePassedToSubscribeCallback.

Instead you can invoke this.viewTask() in that subscribe callback and fetch the entire updated Task object.

For example:

this.taskService.updateTask(task, id)
    .subscribe(
        // new line here to fetch the updated Task object
        this.viewTask()
    );

Note: I'd second @Bunyamin Coskuner's suggestion to utilize BehaviorSubject's (or even a standard Subject). If you're up for a refactor, they are a clean way to manage state within your services.

Answer 2

I've looked at your code. The problem is that the view-task.component updates your tasks, but the navigation.component is not notified about this transaction. I think BehaviorSubject might be just the thing for you.

You can read more about it here

I assume you would have single array of tasks throughout your application and you would display them on your navigation component.

Task.service.ts

export class TaskService {
     // behaviorSubject needs an initial value.
     private tasks: BehaviorSubject = new BehaviorSubject([]);
     private taskList: Task[];

     getTasks() {
         if (!this.taskList || this.taskList.length === 0) {
             this.initializeTasks();
         }

         return this.tasks.asObservable();
     }

     initializeTasks() {
          this.http.get('api/tasks')
              .subscribe(tasks => {
                   // next method will notify all of the subscribers
                   this.tasks.next(tasks);
              }, error => {
                   // proper error handling here
              });
     }

     updateTasks(task: Task) {
          this.http.post('api/updateTask')
              .subscribe(resp => {
                   // update your tasks array
                   this.tasks = ...
                   // and call next method of your behaviorSubject with updated list
                   this.tasks.next(this.tasks);
              }, error => {
                   // proper error handling here    
              });
     }
}

Navigation.component.ts

 export class NavigationComponent implements OnInit{
      tasks: Task[];
      constructor(private taskService: TaskService) {}

      ngOnInit() {
          // this method will be called every time behaviorSubject
          // emits a next value.
          this.taskService.getTasks()
              .subscribe(tasks => this.tasks = tasks);
      }
 }

View-task.component.ts

 export class ViewTaskComponent {
     constructor(private taskService: TaskService) {}

     updateTask(task: Task) {
         this.taskService.updateTask(task);
     }
 }

I haven't tried this code myself. However, I have implemented something similar on my application before. So when you try it and have a problem, let me know.