title: Angular4 - how to ensure ngOnDestroy finishes before navigating away
body: <p>I have a list of objects. The user can click on one, which then loads a child component to edit that component.</p>
  
  <p>The problem I have is that when the user goes back to the list component, the child component has to do some cleanup in the ngOnDestroy method - which requires making a call to the server to do a final 'patch' of the object. Sometimes this processing can be a bit slow.</p>
  
  <p>Of course what happens is the user arrives back on the list, and that api call completes before the database transaction from the <code>ngOnDestroy</code> completes, and thus the user sees stale data.</p>
  
  <pre><code>  ngOnDestroy(){
      this.destroy$.next();
      this.template.template_items.forEach((item, index) =&gt; {
        // mark uncompleted items for deletion
        if (!item.is_completed) {
          this.template.template_items[index]['_destroy'] = true;
        };
      });
      // NOTE 
      // We don't care about result, this is a 'silent' save to remove empty items,
      // but also to ensure the final sorted order is saved to the server
      this._templateService.patchTemplate(this.template).subscribe();
      this._templateService.selectedTemplate = null;
    } 
  </code></pre>
  
  <p>I understand that doing synchronous calls is not recommended as it blocks the UI/whole browser, which is not great.</p>
  
  <p>I am sure there are multiple ways to solve this but really don't know which is the best (especially since Angular does not support sync requests so I would have to fall back to standard ajax to do that).</p>
  
  <p>One idea I did think of was that the ngOnDestroy could pass a 'marker' to the API, and it could then mark that object as 'processing'. When the list component does its call, it could inspect each object to see if it has that marker and show a 'refresh stale data' button for any object in that state (which 99% of the time would only be a single item anyway, the most recent one the user edited). Seems a bit of a crap workaround and requires a ton of extra code compared to just changing an async call to a sync call.</p>
  
  <p>Others must have encountered similar issues, but I cannot seem to find any clear examples except <a href="https://stackoverflow.com/questions/38999842/angular-2-execute-code-when-closing-window">this sync one</a>.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Note that this child component already has a CanDeactive guard on it. It asks the user to confirm (ie. discard changes). So if they click to confirm, then this cleanup code in ngOnDestroy is executed. But note this is not a typical angular form where the user is really 'discarding' changes. Essentially before leaving this page the server has to do some processing on the final set of data. So ideally I don't want the user to leave until ngOnDestroy has finished - how can I force it to wait until that api call is done?</p>
  
  <p>My CanDeactive guard is implemented almost the same as in the <a href="https://angular.io/guide/router#candeactivate-handling-unsaved-changes" rel="nofollow noreferrer">official docs</a> for the Hero app, hooking into a general purpose dialog service that prompts the user whether they wish to stay on the page or proceed away. Here it is:</p>
  
  <pre><code>  canDeactivate(): Observable&lt;boolean&gt; | boolean {
      console.log('deactivating');
      if (this.template.template_items.filter((obj) =&gt; { return !obj.is_completed}).length &lt; 2)
        return true;
  
      // Otherwise ask the user with the dialog service and return its
      // observable which resolves to true or false when the user decides
      return this._dialogService.confirm('You have some empty items. Is it OK if I delete them?');
    }
  </code></pre>
  
  <p>The docs do not make it clear for my situation though - even if I move my cleanup code from ngOnDestroy to a "YES" method handler to the dialog, it STILL has to call the api, so the YES handler would still complete before the API did and I'm back with the same problem.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After reading all the comments I am guessing the solution is something like this. Change the guard from:</p>
  
  <pre><code>    return this._dialogService.confirm('You have some empty items. 
          Is it OK if I delete them?');
  </code></pre>
  
  <p>to</p>
  
  <pre><code>    return this._dialogService.confirm('You have some empty items.
          Is it OK if I delete them?').subscribe(result =&gt; {
        ...if yes then call my api and return true...
        ...if no return false...
        });
  </code></pre>