How to get element after displaying it using *ngIf?

Question

I'm facing this issue frequently. I have an element as shown

<div class="element-1" *ngIf="isShown"></div>

by default, isShown = false; and by clicking an element, I'm making isShown = true;

Now, in the same click callback function If I try to get element-1 as

$('.element-1'), I am not getting that element because it might not in the DOM immediately when the isShown = true.

I am able to get the same using ngAfterContentChecked. But ngAfterContentChecked called many times.

So, how can I get the element by not using ngAfterContentChecked?

Edit

This is my element

<app-card-kpi-inline-overlay #kpisOverlay class="child-component all-kpis-overlay-wrap {{selectedView}}" [style.left.px]="kpiLeft" *ngIf="data['openKpiDetails']==true" [cardData]="data"></app-card-kpi-inline-overlay>

This is my ts method code

@ViewChild('kpisOverlay') kpisOverlay: ElementRef;

showKpiSection(i, event, card) {
    card['openKpiDetails'] = !card['openKpiDetails'];
    event.stopPropagation();
    if (card['openKpiDetails']) {
        setTimeout(() => { 
            const el: HTMLElement = this.kpisOverlay.nativeElement; 
            console.log(el); // always showing undefined
        }, 0);
    }
}

I am trying to toggle the flag. But the console always printing undefined.

Below is my toggle element

<div (click)="showKpiSection(i, $event, data)">Get element</div>