Как получить входное значение из поля поиска

Question

Я пытаюсь получить введенное значение в поле поиска и записать его в консоль. Как я могу этого добиться? пожалуйста, помогите мне. Я использую тему Ngx-admin. Я хочу получить значение из параметра глобального поиска.

HTML

<i class="control-icon ion ion-ios-search"
       (keyup.enter)="submitSearch()"></i>
    <input placeholder="Type your search request here..."
           #input
           [class.hidden]="!isInputShown"
           (blur)="hideInput()"
           (input)="onInput($event)">

TS

value: string;

submitSearch() {
   console.log(this.value);
  }

Answer 1

Вы можете сделать это разными способами.

Вы можете передать значение из шаблона вашему методу, указав свой ввод в шаблоне и передав его значение в параметрах вашего машинописного метода:

HTML:

<!-- I moved the keyup.enter event from your <i> element to the input -->
<i class="control-icon ion ion-ios-search"></i>
<input #searchInput placeholder="Type your search request here..." [class.hidden]="!isInputShown" (blur)="hideInput()"
    (input)="onInput($event)" (keyup.enter)="submitSearch(searchInput.value)">

Typescript:

submitSearch(value: string) {
    console.log(value);
}

Вы также можете использовать ngModel для привязки вашего свойства машинописного текста к входным данным шаблона. Прочтите официальную документацию: https://angular.io/api/forms/NgModel

РЕДАКТИРОВАТЬ: Я добавил короткий пример: https://stackblitz.com/edit/angular-input-example-cvpkkq

Это именно то, что вам нужно в официальная документация Angular: https://angular.io/guide/user-input#key -event-filtering-with-keyenter