Как отобразить сообщение прямо возле ввода автозаполнения, когда нет доступных элементов

Question

Я пытаюсь отобразить блок, если нет элементов для автозаполнения прямо под полем ввода. По умолчанию компонент автозаполнения отображается только при наличии элементов.

Вот код, который я использую:

<input [formControl]="control" [matAutocomplete]="auto" matInput type="text">

<mat-autocomplete #auto="matAutocomplete" 
                  (optionSelected)="onOptionSelected($event.option.value)"
                  [displayWith]="displayWith">
  <mat-option *ngFor="let item of items" [value]="item">
    <span class="label">{{ item.label }}</span>
  </mat-option>
</mat-autocomplete>

Спасибо за вашу помощь! Thierry

Answer 1

Вы можете использовать *ngif с items.length, так что div будет виден только при отсутствии элементов.

<input [formControl]="control" [matAutocomplete]="auto" matInput type="text">
<div *ngIf="!items.length">
  <!--    your content here-->
</div>

<mat-autocomplete #auto="matAutocomplete"
                  (optionSelected)="onOptionSelected($event.option.value)"
                  [displayWith]="displayWith">
  <mat-option *ngFor="let item of items" [value]="item">
    <span class="label">{{ item.label }}</span>
  </mat-option>
</mat-autocomplete>

Answer 2

Просто добавьте первую отключенную опцию «без элементов» с помощью *ngIf='!items.length'.

<mat-autocomplete>
  <mat-option *ngIf='!items.length' disabled>
    <span class="label">No items</span>
  </mat-option>
  <mat-option *ngFor="let item of items" [value]="item">
    <span class="label">{{ item.label }}</span>
  </mat-option>
</mat-autocomplete>

Если у вас есть какие-либо проблемы с реализациями, ниже работает пример StackBlitz: https://stackblitz.com/edit/angular-n9c5ey?file=app%2Fautocomplete-filter-example.html