I have a directive that is used on input fields on my form. I am trying to get the value from that directive in my TS file
Directive
@Directive({
selector: '[appOskInput]',
})
export class OskInputDirective implements OnInit {
private isBlurTrue: boolean = false;
@HostListener('focus')
private onFocus() {
console.log("focus");
this.isBlurTrue = false;
this.keyboard.fireKeyboardRequested(true);
this.subscribeToKeyboardEvents();
}
@HostListener("onBlur")
private onBlur() {
console.log("blur");
this.isBlurTrue = true;
this.keyboard.fireKeyboardRequested(false);
this.unsubscribeFromKeyboardEvents();
}
}
HTML
<cb-form [formGroup]="setupForm">
<form-input
appOskInput
(inputChanged)="onInputChanged($event,'accountNumber')"
[formStatus]="formStatus"
[parentFormGroup]="setupForm"
[data]="{formControlName: 'accountNumber', name: 'accountNumber'}">
</form-input>
</cb-form>
Essentially I want to use the isBlurTrue value in my TS file. Anyone knows how I can do this?
I figured it out
I just passed an output event in the directive
@Output() blurChanged = new EventEmitter();
Then emitted the value to it
this.blurChanged.emit(this.isBlurTrue);
In my HTML
I added
(blurChanged)="onBlurChanged($event)"
And in my TS I added
onBlurChanged(ev) {
console.log(ev)
}
You could also have a public function within your directive where exposes your private property, and then use it in your template html from a parent control like this:
Directive
...
private isBlurTrue: boolean = false;
getBlur(): boolean {
return this.isBlurTrue;
}
HTML
<div #myDirective="appOskInput">
...
<input (blur)="myDirective.getBlur()"/>
...
</div>