Modal Window не закрывается

Я создал свой layout для модального окна, оно открывается, прекрасно.

Когда я хочу его закрыть, то по логам вижу, что состояние меняется и что функция вызывается, но окно не исчезает.

Вот как я использую модальное окно:

@for (item of counter(item.labs); track $index) 
        {
          <div class="labs">
            <button (click)="openModal($index)">
              <div class = "labs-counter">
                <span>Some Text {{$index+1}}</span>

                <span>-</span>

                <span>0-5</span>

                <app-modal #modal></app-modal>
              </div>
            </button>
          </div>
        }

Вот функция закрытия:

@ViewChildren('modal') modals!: QueryList<ModalComponent>;

  closeModal(index: number) {
    const modal = this.modals.toArray()[index];
    if (modal) {
      modal.close();
    }
  }

в самом layout вот такие функции:

isVisible = false;

  open() {
    this.isVisible = true;
  }

  close() {
    this.isVisible = false;
    console.log("we are here", this.isVisible)
  }

Eще раз скажу, что по логу вижу, что функция close() вызывается и что состояние isVisible меняется на нужное, но окно не исчезает.

В чем может быть проблема?