Angular 2 как динамически получить высоту элемента выпадающего меню?

Question

У меня трехуровневое мега-меню, и я пытаюсь получить высоту 2-го уровня выпадающего меню (.mega-dropdown-menu), это значение c динамического типа, потому что его высота зависит от высоты 3-го уровня мегаменю (.nav - list).

HTML:

            <div class="main-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown mega">
                        <a href="#" class="dropdown-toggle">Menu 1</a>
                        <ul class="mega-dropdown-menu">
                            <li>
                                <a href="#">Menu 1.1</a>
                                <ul class="nav--list">
                                    <li><a>Menu 1.1.1</a></li>
                                    <li><a>Menu 1.1.2</a></li>
                                    <li><a>Menu 1.1.3</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="#">Menu 1.2</a>
                                <ul class="nav--list">
                                    <li><a>Menu 1.2.1</a></li>
                                    <li><a>Menu 1.2.2</a></li>
                                    <li><a>Menu 1.2.3</a></li>
                                    <li><a>Menu 1.2.4</a></li>
                                    <li><a>Menu 1.2.5</a></li>
                                    <li><a>Menu 1.2.6</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

Я пробовал с хуками жизненного цикла @ViewChild и ngAfterViewInit, но он не работают, потому что при загрузке страницы раскрывающееся меню скрыто, и значение всегда равно 0.

У меня есть logi c с JQuery, но я не знаю, как сделать то же самое для Angular.

function isVisible() { 

    let dropDownMenu = $('.mega-dropdown-menu');
    let dropDownMenuHeight = dropDownMenu.outerHeight();
    let internalMenu = $(this).children('.nav--list');
    let internalMenuHeight = internalMenu.outerHeight() + 2;

    if (internalMenuHeight > dropDownMenuHeight) {
        dropDownMenu.css('height', internalMenuHeight);
        
    } else {
        dropDownMenu.css('height', 'auto');
        internalMenu.css('height', '100' + '%');
    }
}

Может ли кто-нибудь помочь мне с извлечением «высоты» класса DOM mega-dropdown-menu? Спасибо!