0
111
VistasIntercambio angular entre 2 clases diferentes al hacer clic
Estoy tratando de construir una barra de herramientas con funciones de búsqueda en angular. Por ejemplo : 
y estas divisiones son como:
<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> Aquí el .search permanecerá oculto. Si hago clic en search-btn , aparecerá .search , que cubrirá toda la barra de herramientas. Puedo ocultar el div al hacer clic en el botón usando [oculto] pero el problema es que la .search no cubre todo el lugar. Ahora es algo como: 
si hago clic en el botón de búsqueda: 
lo que quiero es: 
Quiero que la barra de búsqueda cubra toda la barra de .toolbar si se presiona el botón de búsqueda.
tengo menos conocimiento de css
1 Respuestas
Responde la pregunta0
Intente usar Angular ngIf en lugar de usar clases css cuando intente mostrar u ocultar elementos dependiendo de alguna condición, como esta:
<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> En su ejemplo, también tendría que poner un ancho del 100 % en el elemento .input para que cubra todo el sitio, así:
input: { width: 100% }