Struggling with @Directives and @Hostlisteners - seeking assistance
The directive added to the input seems unresponsive, failing to trigger any events or console.log(). I'm puzzled and frustrated as there appears to be a missing piece of the puzzle that eludes me.
Here's my project structure:
app
|
|___ components
| |
| |___ Autocomplete
| |___ autcomplete.component.html
| |___ autcomplete.component.ts
| |___ autcomplete.component.css
|
|
|___ directives
| |___ keyboard.directive.ts
|
|___ app.module.ts
In autocomplete.component.html:
<div class="input-field">
<label [attr.for]="id">{{ label }}</label>
<input keyboard type="text" [(ngModel)]="inputData"
name="inputData" [attr.id]="id"
class="autocomplete-input" autocomplete="off"/>
</div>
and keyboard.directive.ts:
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[keyboard]'
})
export class KeyboardDirective {
constructor(el: ElementRef) {}
@HostListener('focus', ['$event']) onFocus(value: string) {
console.log('Focus caught.');
}
@HostListener('keydown', ['$event']) onKeyPressed(e: any) {
console.log('keydown event);
}
}
and my app.module.ts looks like this:
import {KeyboardDirective} from '../app/directives/keyboard.directive';
@NgModule({
declarations: [
KeyboardDirective
],
providers: [],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
bootstrap: [AppComponent]
})
export class AppModule {}
Directly adding the directive in the component works fine, but placing it in another folder results in issues. Any insights into why this might be happening would be greatly appreciated.