Внешний вид элемента только при фокусировке на поле ввода с помощью Angular 7

Question

Может кто-нибудь подсказать, как отобразить всплывающее меню suggestions с прошлыми запросами только после того, как было выбрано поле ввода search-form__input?

search.component.html

<div class="search-form mt-2 input-group mb-2">
  <input appShowSuggestions type="search" class="form-control search-form__input"
         placeholder="Поиск (макс. количество найденных статей - 30)" maxlength="60"
         [(ngModel)]="searchQuery"
         (keyup)="showArticlesKeyup($event)"
         [formControl]="typeahead"
         (input)="suggest()" >
  <div class="input-  group-append">
    <button class="btn btn-outline-secondary search-form__btn" type="submit"
      (click)="showArticles()" [disabled]="searchQuery.trim() === ''">Искать</button>
  </div>
</div>
<div class="suggestions" *ngIf="suggestions.length">
  <small class="text-muted">Ваши прошлые запросы:</small>
  <p class="suggestions__link"
     *ngFor="let suggest of suggestions"
     (click)="searchQuery = suggest; showArticles()"> {{ suggest }}</p>
</div>

search.component.ts

export class SearchComponent implements OnInit {
  constructor(private articleService: ArticleService) { }

  searchQuery = '';
  articles: any[] = [];
  searchQueryCollection: string[] = [];
  suggestions: string[] = [];
  typeahead: FormControl = new FormControl();


  static getUrl(searchQuery: string) {
    return 'https://ru.wikipedia.org/w/api.php?action=opensearch&profile=normal&search='
      + searchQuery + '&limit=30&namespace=0&format=json&origin=*';
  }

  suggest() {
    this.suggestions = Array.from(new Set(this.searchQueryCollection))
      .filter(c => c.startsWith(this.typeahead.value))
      .slice(0, 5);
  }

  ngOnInit() {
  }

  showArticles() {
    this.articleService.getArticles(SearchComponent.getUrl(this.searchQuery))
      .subscribe(
        (data: IArticle) => {
          this.articles = Object.values({ ...data });
          this.searchQueryCollection.push(this.searchQuery);
        }
      );
  }

  showArticlesKeyup(event) {
    if (event.key === 'Enter' && this.searchQuery.trim() !== '') {
      this.showArticles();
    }
  }
}

Answer 1

<input appShowSuggestions type="search" class="form-control search-form__input"
         placeholder="Поиск (макс. количество найденных статей - 30)" maxlength="60"
         [(ngModel)]="searchQuery"
         (keyup)="showArticlesKeyup($event)"
         [formControl]="typeahead"
         (input)="suggest()" >

Одним из предложений было бы добавить (focus)="toggleSuggestions()", и тогда предложения переключения выглядели бы так:

toggleSugestions = () => this.showSuggestions = !this.showSuggestions;

Затем вы изменили бы свой ng, если бы что-то вроде:

<div class="suggestions" *ngIf="showSuggestions && suggestions.length">