Styjun

I'm new to Angular5 and searched for hours but couldn't resolve my issue.
Every related threads on SO are not in the same version as me.

I have an input on which I want to trigger a function when something is typed in that input.

Here's my input:

<input
 #autocompleteInput
 class="inputHeader"
 (click)="openSearch()"
 placeholder="Coupe homme, lissage brésilen, ..."
/>

Here's my input property declaration:

@Input() autocompleteInput: string;

When I console.log(this.autocompleteInput); in the ngOnInit() method, it display "undefined".

What am I doing wrong ?

Any help would be welcomed.

Input property is used for component interaction. Here if you want to get the value you entered in input, then you can use

in html:

 <input
 #autocompleteInput
 class="inputHeader"
 (click)="openSearch()"
 placeholder="Coupe homme, lissage brésilen, ..."
 (input)="inputData($event.target.value)"
 />

in ts:

inputData(data: any) 
 console.log(data)

You should use "keyup" event for the same:

<input
 #autocompleteInput
 class="inputHeader"
 (click)="openSearch()"
 placeholder="Coupe homme, lissage brésilen, ..."
 (keyup)="methodName($event)"

/>

In ts file

import ViewChild from '@angular/core';

export class tsClass implements OnInit 
@ViewChild('autocompleteInput') autocompleteInput;
//now you can user it
this.autocompleteInput = this.autocompleteInput.nativeElement;

autocompleteInput is a reference to your input element, and not the content of your input.
You would have to use it with the ViewChild decorator to get an ElementRef:

@ViewChild('autocompleteInput') inputRef: ElementRef;

From this ElementRef, you can get the native element (HTMLInputElement) with inputRef.nativeElement.

However, if you want to get the text as it is typed in the input, you should use the input event:

<input
 #autocompleteInput
 type="text"
 class="inputHeader"
 (input)="onInput($event.target.value)"
 placeholder="Coupe homme, lissage brésilen, ..."
/>

onInput(value: string) 
 // do something with value

Or use an ngModel to control the value of your input:

<input
 #autocompleteInput
 type="text"
 class="inputHeader"
 [ngModel]="value"
 (ngModelChange)="valueChanged($event)"
 placeholder="Coupe homme, lissage brésilen, ..."
/>

value: string;

valueChanged(value: string) 
 this.value = value;
 // do something with this.value

See this Stackblitz demo

If you are using Ionic, you should use <ion-input> instead of <input>:

<ion-input type="text" (input)="onInput($event.target.value)"></ion-input>