Angular 9 Typescript - How to pass the textbox entered value to a directive's input string

Question

I need to pass the value entered in the textbox to another directive's input variable, without using ngModel. How to achieve this ? Below is the code.

HTML : 

<input type="text" placeholder='Type here' /> **The textbox to get the user's input value** 
<searchDirective [searchText]=''></searchDirective> **Need to pass the textbox's value to this [searchText] input variable**


*In searchDirective.component.ts :*

export class searchDirective implements OnInit {

@Input() searchText: string;

ngOnInit(): void {}

@HostListener('click', ['$event']) onClick($event) {
 **On this click event need to get the textbox's input value that the user entered** 
}

}

question from:https://stackoverflow.com/questions/65931032/angular-9-typescript-how-to-pass-the-textbox-entered-value-to-a-directives-in

Answer 1

Try using this

Create a ref with #inputRef (any name you prefer) in the input and pass that value in searchDirective (both are in same HTML) inputRef.value as input has a value property

HTML :

<input type="text" placeholder='Type here'  #inputRef /> **The textbox to get the user's input value and #inputRef will help in accessing value in template** 
<searchDirective [searchText]='inputRef.value'></searchDirective>