<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Angular 2.4.0 and 2.0.1 remove a component's DOM nodes before the <code class="notranslate">ngOnDestroy</code> method is called. The docs state that <code class="notranslate">ngOnDestroy</code> is "called just <em>before</em> Angular destroys the directive/component." I take this to mean that the DOM nodes are removed <em>after</em> <code class="notranslate">ngOnDestroy</code> is called. Correct me if I'm wrong though, in which case this isn't a bug but maybe just needs a documentation clarification.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
<code class="notranslate">ngOnDestroy</code> is called <em>before</em> a component's DOM is removed.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="https://plnkr.co/edit/7l5kUZXWJk9m7ZOHHPXS?p=preview" rel="nofollow">https://plnkr.co/edit/7l5kUZXWJk9m7ZOHHPXS?p=preview</a><br>
To reproduce:</p>
<ol dir="auto">
<li>Open the console</li>
<li>Click "Toggle node"</li>
<li>Observe that the logs show that DOM nodes are removed before <code class="notranslate">ngOnDestroy</code> is called.</li>
</ol>
<p dir="auto">Note: this behavior can also be confirmed by adding a DOM breakpoint on node removal and a breakpoint on the <code class="notranslate">TestComponent</code>'s <code class="notranslate">ngOnDestroy</code> method. The DOM breakpoint breaks first, followed by <code class="notranslate">ngOnDestroy</code>.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I'm in an Electron context working with <code class="notranslate">&lt;webview&gt;</code>s. If a webview gets destroyed before I have an opportunity to clean up some registered event handlers, they unavoidably leak.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
macOS, latest Chrome.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X<br>
Confirmed on 2.4.0 and 2.0.1</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[X] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[X] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When ngOnDestroy is called, the element is already removed from the DOM.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Before ngOnDestroy and before removing from DOM, ngBeforeDestroy would get called.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I have a list of items. When the currently focused one is removed, I want to focus the next item. However, due to the element already being out of DOM, I do not know what the next item in DOM is.</p>
<p dir="auto">Thank you.</p>