If one element active then not show another one Angular JS

Question

I am working on AngularJS project. It's a store that has a search bar and profile, cart icon near it.

When I click the search bar, it extends to the right and overlays the right icons. And when it happens, the number of items in a cart is still visible.

I need to make the number of items in the cart element disappear when the search bar is "active". Can you give me any advice on how I can do this? I've read about hasElement() but it doesn't seem to be a solution here.

The code:

HTML

 <div id="ch-shopping-cart-icon-container" class="ch-shopping-cart">
    <div class="ch-shopping-cart-icon" role="button" aria-label="Shopping Cart">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 36 36"><path 
      d="..."/>
      </svg>
    </div>
    <div class="ch-shopping-cart-counter"></div>
 </div>

 <div id="ch-search-box-wrap">
   
   <here injects the search bar component>

 </div>

CSS

@media (min-width: 768px) {
        #ch-search-box-wrap:active,
        #ch-search-box-wrap:focus-within {
          padding-right: 0;
          z-index: 9999;
          right: -10px;
        }
      }
      #ch-search-box-wrap {
        position: absolute;
        z-index: 999;
        height: 56px;
        width: 100%;
        margin: auto;
        display: block;
        max-width: 750px;
        padding-right: 95px;
        right: 0;
        transition: .2s;
      }

I would use something like ng-if for the ch-shopping-cart-counter. If #ch-search-box-wrap:active then not to show. If not active then show.

Thank you!