Angular swap between 2 different class on click

April 27, 2022

I am trying to build a toolbar with search functions in angular.
For example :

and this divisions are like:

<div class="toolbar">
    <div class="search">search field</div>
    <div class="otherElements">
      <div class="search-btn"><button>search</button></div>
      <div class="bookmark">bookmark_icon</div>
      <div class="otherIcons">other icons</div>
    </div>
</div>

Here the .search will remain hidden. If i click on search-btn then .search will show up which will cover the whole toolbar. I can hide the div on button click by using [hidden] but the problem is .search doesn’t cover the whole place.
Now it is something like :

if I click the search button :

what I want is :

I want the search bar cover the whole .toolbar if search button is pressed.

I have less knowledge of css

Here is a minimal example

>Solution :

Try using Angular ngIf instead of using css classes when trying to show or hide elements depending on some condition, like this:

<div class="toolbar">
<div class="search" *ngIf="!searchItem">search field</div>
<div class="otherElements" *ngIf="searchItem">
  <div class="search-btn"><button>search</button></div>
  <div class="bookmark">bookmark_icon</div>
  <div class="otherIcons">other icons</div>
</div>