Angular swap between 2 different class on click

Question

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

Answer 1

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>

In your example, you would also have to put a width 100% on the .input element to make it cover the whole site, like this:

input: { width: 100% }