0
107
ViewsAngular swap between 2 different class on click
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
1 answers
Answer question0
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% }