Tengo un ícono de barra de búsqueda 🔍 cuando haces clic en él, aparece la barra de búsqueda ▭
El código responsable de mostrar la barra de búsqueda ▭:
<ion-icon (click)="toggleSearchBar()" name="search"></ion-icon>La función:
toggleSearchBar() { this.shouldShowSearchBar = !this.shouldShowSearchBar; this.searchBarEl.setFocus(); }Pero tengo este problema:
1- Necesito envolver this.searchBarEl.setFocus(); dentro setTimeout porque la barra de búsqueda está envuelta dentro *ngIf="shouldShowSearchBar" que no se procesa tan rápido, por lo que si no envuelvo el método dentro del tiempo de espera, no llamará porque el elemento dom no habría aparecido.
¿Puedo escuchar cuando aparece un elemento Dom en Angular?
Si cambia *ngIf="shouldShowSearchBar" a [hidden]="!shouldShowSearchBar" , entonces el DOM ya contendrá el elemento HTML y no tendrá que agregar setTimeout a su código de manejo de eventos toggleSearchBar . También puede usar ngClass o ngStyle de la misma manera con la display: none .