Как получить высоту изображения или GridLayout после его отображения

Question

Я использую угловой.У меня есть изображение карусели.У меня есть две сетки, одна поверх другой.Верхняя сетка имеет кнопки навигации.Я хочу, чтобы они были расположены в центре изображения сверху вниз.Я пытаюсь сделать это на основе высоты изображения, так как она будет отличаться в зависимости от размера устройства.Как я могу получить либо высоту видимого изображения, либо высоту вмещающей сетки?

<GridLayout class="template_body" rows="auto,50*,auto" columns="*" #sv>
    <GridLayout row="0" #wviWrapper>
            <!-- <web-view id="wvi" #wvi></web-view> -->
            <template-text *ngIf="lessonDetail.instruction" [data]="lessonDetail.instruction" [version]="version" [screenwidth]="screenWidth"></template-text>
    </GridLayout>
    <GridLayout row="1">
        <player-carousel [data]='lessondata' [itemindex]="lessonindex" (loaded)="onCarouselLoaded($event)" [clength]="carouselLength"></player-carousel>
    </GridLayout>
    <GridLayout row="1">
        <FlexboxLayout backgroundColor="#3c495e" alignItems="center" justifyContent="space-between" verticalAlignment="top" orientation="horizontal" class="button-group" #bg>
            <Button text="&#xf104;" appDebounceTap (debounceClick)="getItem(-1)" [debounceTime]="1000" id="backbtn" col="0" alignSelf="flex-end" class="back-btn fas" horizontalAlignment="left"></Button>
            <Button text="&#xf105;" appDebounceTap (debounceClick)="getItem(1)" [debounceTime]="1000" id="nextbtn" col="1" alignSelf="flex-end" class="next-btn fas" horizontalAlignment="right"></Button>
        </FlexboxLayout>
    </GridLayout>
</GridLayout>

Я использую angular: