Check a Component content is visible Typescript - Angular4

Question

I have a modal that is in the DOM under a component that will show it up when you do a click to a button. What I'd like to know is whether there is a way to see if the component is actually being displayed on the screen or not.

In my example I have a boostrap 4 modal that will show when I click so in theory I should be able to determine if the class "show" is present or now inside the component that has the actual modal. Having said that. To achieve that I'm implementing the AfterViewChecked hook but when I click the parent component to toggle the modal it still hasn't updated the page and the class "show" is not in the classList for some reason (or I am doing something wrong).

The weird thing about this is that if I print the classList I have this:

["modal", value: "modal"]
length
:
2
value
:
"modal show"
0
:
"modal"
1
:
"show"

and right after it I do: element.classList.contains("show") and that returns false!

Is there any other way to get that state of the modal from the typescript component?

UPDATE:

The AfterViewChecked implementation:

public ngAfterViewChecked(): void {
        const modalElement = document.getElementById("imageModal");

        console.log(modalElement.classList);

        console.log(modalElement.classList.contains("show"));
    }

The HTML:

<div class="modal" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center modal-size" role="document">
            <div data-dismiss="modal">
                <img class="modal-content" [src]="image">
            </div>
        </div>
    </div>
</div>

UPDATE:

<div class="carousel-inner" role="listbox">
            <div *ngFor="let image of project.images, let i = index" class="carousel-item" [ngClass]="{'active' : i == 0}">
                <img data-toggle="modal" data-target="#imageModal" (click)="zoom(image)" [src]="image">
            </div>
        </div>

The modal is after the carousel on that component template HTML:

<modal-image [image]="selectedImage"></modal-image>

where zoom(image):

public zoom(image: string) {
        this.selectedImage = image;
    }