Angular 8/9 nested component triggers modal at root component takes long time

 // nested component sometimes triggers a modal at root component will take a long time 

// This is a result of change detection at root component takes a while if current component is too nested

// solution

// make a stative reference at root div and trigger a click

static element reference :

.html

// root div

<div #myDiv>

</div>

Component:

// Read means reading an element, static true meaning element is already in template 

@ViewChild('myDiv', { read: ElementRef, static: true }) myDiv: ElementRef,

//Trigger click

  this.myDiv.nativeElement.click();