Focus angular material input on clicking tilde

Question

I have an angular material input in a component " awesomebar.component.html " like:

<input #placeAutocompleteInput style="max-width:100%;" 
       [placeholder]="placeholderText"
       [matChipInputFor]="chipListPlaces" 
       [formControl]="mainSearchCtrl" 
       [matAutocomplete]="mainAutocomplete" 
       (keyup.enter)="onEnter($event)"/>

I am defining an angular directive to highlight the input element when I click tilde(~) in another file keyboard.directive.ts . When I click the (~) from the keyboard, the input element should get highlighted.

My code for directives :

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if(event.keyCode === 192) 
         {
               // input focus logic
               this.placeAutocompleteInput.nativeElement.focus();
               this.placeAutocompleteInput.nativeElement.value = '';
         } 
    }  

I can't get the placeAutocompleteInput.nativeElement in the above logic. How can I make it work . Since the input element is in another component file and directive is defined in different file, I can't able to access the nativeElement.

Edit: got the answer with following adjustments :

In file awesomebar.component.html:

<input #placeAutocompleteInput style="max-width:100%;" 
                [placeholder]="placeholderText"
                [matChipInputFor]="chipListPlaces" 
                [formControl]="mainSearchCtrl" 
                [matAutocomplete]="mainAutocomplete" 
                (keyup.enter)="onEnter($event)"
                captureDoubleTilde/>

In file keyboard.directive.ts :

@Directive({
      selector: `[captureDoubleTilde]`
    })
    export class CaptureDoubleTildeDirective {
      constructor(
        public dialog: MatDialog,
        private el: ElementRef
        ) { }

        @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
             if(event.keyCode === TILDE_KEYCODE && localStorage.accessToken != undefined) {
                pressCount += 1;
                var focus= 0;
                if (pressCount >1) {
                    var scrollStep = -window.scrollY / (50 / 15),
                    scrollInterval = setInterval(function(){
                        if ( window.scrollY != 0 ) {
                            window.scrollBy( 0, scrollStep );

                        }
                        else clearInterval(scrollInterval); 
                    },15);
                    this.el.nativeElement.focus();
                    this.el.nativeElement.value = '';

                }
                setTimeout(() => pressCount=0, 200);

            }
        }



    }

however when I am double clicking the tilde, along with highlight, (~) character is showing in my input, how can i correct it.

Answer 1

Here I edited the DEMO . All is applied to the same level component and directive, but you can split those and use in higher level, but also add TestService to app.module providers array and import it.

---

What is this.placeAutocompleteInput ? Is that snippet from your directive? If it is and if you applied it to your input, you should make it work by accessing directive's host via ElementRef :

import {ElementREf} ...

constructor(private elR: ElementRef){}

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if(event.keyCode === 192) 
         {
               // input focus logic
               this.elR.nativeElement.focus();
               this.elR.nativeElement.value = '';
         } 
    }  

ps I also wonder why you need to focus() if key pressed - isn't it focused already?

Here you can see a DEMO . I changed couple events, but the idea is the same. Click space and focus will be removed and input's value also empty string.