Angular 6 - Waiting for element to load inside *ngIf on setting ngIf to true

Question

I am using angular 6.

I have a html like the below.

<div class="catalog-menus-subnav-wrapper"
                     *ngIf="showMenus">
 <div class="hidden-elem">
 </div>
</div>

Here, showMenus will be false by default and setting this to true on click of a button in the same page.

Now, I am trying to get this div in angular immediately after setting showMenus to true and not getting sometimes as the dom is not loaded completely.

public onClick(event) {

      this.showMenus= true;

      const item= $(event.currentTarget);
      const wrapper = item.next('.catalog-menus-subnav-wrapper');
      const height= item.closest('.hidden-elem').height();

  }

Here, item.next('.catalog-menus-subnav-wrapper') not returning values sometimes as the DOM load is not done while this is executed. Is there any way to wait for DOM to load after setting showMenus to true? Or, Is there any other fix?

Thanks

Answer 1

Try to use hidden, If you use ngIf then it will remove element from DOM

Try this below,

in .html

<div class="catalog-menus-subnav-wrapper" [hidden]="!showMenus">
   <div class="hidden-elem">
   </div>
</div>