Get value from directive into component-CodePudding

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?

CodePudding user response：

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)
}

CodePudding user response：

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>