ngAfterContentChecked triggered before element actually being "changed/deleted" from DOM?

Question

Here's my code:

ngAfterContentChecked() {
    this.updateGUI();
}
@HostListener('window:resize', ['$event'])
onResize(event) {
    this.updateGUI();
}

updateGUI() {
    let mainToolbar = this.helpers.getBoundingClientRect(document.getElementById('main-toolbar'));
    this.mainSidenavContentHeight = document.documentElement.clientHeight - mainToolbar.height;

    let recipeBuilder = this.helpers.getBoundingClientRect(document.getElementById('recipe-builder'));
    if (recipeBuilder !== null) {
        this.mainSidenavContentHeight -= recipeBuilder.height;
        console.log("recipeBuilder");
    }
    console.log("updateGUI");
}

// helpers

static getBoundingClientRect(element) {
    if (element === null) {
        return null;
    }

    var rect = element.getBoundingClientRect();
    return {
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        left: rect.left,
        width: rect.width,
        height: rect.height,
        x: rect.x,
        y: rect.y
    };
}

Switching to a component (i.e. load by route) where recipe-builder is not more present anymore, the first time it logs:

    recipeBuilder
    updateGUI

Buw ff I click some seconds later, only:

    updateGUI

So it seems first time I load the component, recipe-builder is still active on DOM, thus it calculate its height (which I don't want, of course).

What's the correct way to manage this in Angular? i.e. retrieve DOM properties of a HTML component and be sure they are unloaded when "destroyed"?