Angular swap between 2 different class on click-CodePudding

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

and this divisions are like:

<div >
    <div >search field</div>
    <div >
      <div ><button>search</button></div>
      <div >bookmark_icon</div>
      <div >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

CodePudding user response：

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

<div >
<div  *ngIf="!searchItem">search field</div>
<div  *ngIf="searchItem">
  <div ><button>search</button></div>
  <div >bookmark_icon</div>
  <div >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% }