Закрыть два div одной кнопкой

Имею:

users-component.html

<div class="container">
  <div class="btn-massages">
    <app-user-new [isVisibleBtn]="isVisibleBtn"></app-user-new>
  </div>

  <div class="users-field">
    <div class="users">
      <span (click)="isVisible = true; isVisibleBtn = true" class="btn btn-primary btn-lg users-button">
      </span>
      <table>
        список человечиков
      </table>
    </div>

    <div class="users-specialty">
      <div class="userNew">
        <app-user-new [isVisible]="isVisible" header="Create new user"></app-user-new>
      </div>
    </div>
  </div>
</div>

user-new-component.html

<div *ngIf="isVisibleBtn" class="nameToClose">
  <button type="button" class="btn btn-lg btn-massages-err disabled">Error massages</button>
  <button type="button" class="btn btn-lg btn-massages-susses disabled">Success massages</button>
</div>
<div *ngIf="isVisible" class="row nameToClose">
  <div class="col-6 wrapper">
    <h2>Create new user</h2>
      <span (click)="isVisible = false; isVisibleBtn = false" class="close"></span>
    <form>
      форма для добавления нового человечика
    </form>
  </div>
</div>

Идея заключается в том, чтобы <span (click)="isVisible = true; isVisibleBtn = true" class="btn btn-primary btn-lg users-button"> открыл, а <span (click)="isVisible = false; isVisibleBtn = false" class="close"></span> закрыл в один клик isVisible и isVisibleBtn. Открывается все замечательно. Не закрывается :( Если этот span в блоке isVisibleBtn, то он закрывает isVisibleBtn. Если в блоке isVisible - закрывает его же. Если вытаскиваю его отдельно - получается две кнопки. А мне нужна одна.

Пробовала сотворить что-то вроде

const buttons = document.getElementsByClassName('close');
  [].forEach.call(buttons, function(el){
    el.addEventListener('click', function() {
      el.closest('.nameToClose').style.display = 'none';
    });
  });

ожидаемо не работает совсем. Как это сделать корректно?