Как я могу скрыть нажатие кнопки другой кнопки в scss?

Question

Я хочу изменить свойство класса при нажатии на кнопку Show. При нажатии кнопки Show раскрывающаяся кнопка data class должна скрыться. Для пробного использования я попытался применить свойство background color к hover, которое работало нормально. Но при нажатии на кнопку попытаться скрыть data class dropdown не получилось. Как я могу достичь такой функциональности, используя вышеуказанный подход или ANY OTHER APPROACH?

    <ng-container">
        <input type="checkbox" id="button" class="check" />
        <label class="filter-button" for="button" (click)="toggling()">Monday </label>
        <div class="filters">
          <div class="data"
            *ngIf="length > 2">
            <overlay [dropdownLabel]="i18nLabelService.investment.translation">
            </overlay>
          </div>
          <div class="option-bar" *ngIf="showFilterOverlay">
            <button (click)="toggling()">Show {{Data?.length }}/{{ DataTable.length }}
              funds</button>
          </div>
        </div>
      </ng-container>

Это работает

.option-bar {
    button:hover {
      {
      background-color:red;
      }
    }

  }

Но это не работает

.option-bar {
    button+.data:checked+label {
       +.data {
      display: none;
      }
    }

  }

Answer 1

В вашем component.ts вы можете иметь переменную с именем shouldHide, например:

  // component.ts
  shouldHide = false;

И вы можете переключать ее по щелчку и скрывать div класса данных на основе этого состояния:

<!-- component.html -->
<ng-container">
        <input type="checkbox" id="button" class="check" />
        <label class="filter-button" for="button" (click)="toggling()">Monday </label>
        <div class="filters">
          <div class="data" *ngIf="shouldHide">
            <overlay [dropdownLabel]="i18nLabelService.investment.translation">
            </overlay>
          </div>
          <div class="option-bar" *ngIf="showFilterOverlay">
            <button (click)="shouldHide = !shouldHide">Show {{Data?.length }}/{{ DataTable.length }}
              funds</button>
          </div>
        </div>
      </ng-container>

Чтобы сделать это через CSS, вы можете добавить условный класс, например:

<!-- component.html -->
<ng-container">
        <input type="checkbox" id="button" class="check" />
        <label class="filter-button" for="button" (click)="toggling()">Monday </label>
        <div class="filters">
          <div class="data" [class.hidden]="shouldHide">
            <overlay [dropdownLabel]="i18nLabelService.investment.translation">
            </overlay>
          </div>
          <div class="option-bar" *ngIf="showFilterOverlay">
            <button (click)="shouldHide = !shouldHide">Show {{Data?.length }}/{{ DataTable.length }}
              funds</button>
          </div>
        </div>
      </ng-container>

А затем в своем scss:

div.data {
  &.hidden {
    display: none;
  }
}