Modify the BehaviorSubject upon clicking or focusing on the input

Question

Modify the BehaviorSubject upon clicking or focusing on the input

I have created a directive for an input field. I want to trigger a flag in another component when the input is clicked or focused upon.

@Directive({
  selector: '[appDatepicker]'
})
export class DatepickerDirective implements DoCheck{

  constructor(private el: ElementRef, private transport: TransportData<boolean>) {

   }

  ngDoCheck(): void {
    let element = this.el.nativeElement;
    if (element.onfocus !== null || element.onclick !== null) {
      this.transport.setListValue(true);
    } else {
      this.transport.setListValue(false);
    }
  }
}

Here is my input with the appDatepicker directive applied.

<input appDatepicker>

Upon loading the page, the attributes onfocus and onclick are initially null as expected. However, the issue arises when clicking on the input field - nothing happens. How can I listen for input events within the directive in order to set the BehaviorSubject?

javascript angular typescript

Answer 1

Answer №1

If you want to handle host element events within a directive, you can make use of the @HostListener decorator.

@HostListener('focus', ['$event'])
focus(event) {
  console.log('Element has gained focus');
}

@HostListener('click', ['$event'])
click(event) {
  console.log('Element was clicked!');
}

@HostListener('blur', ['$event'])
blur(event) {
  console.log('Element lost focus');
}

Check out a demonstration here: https://stackblitz.com/edit/angular-bg7rpl

Emitting Custom Events

You also have the ability to emit your own events from the directive if desired.

directive.ts

@Output() myfocus: EventEmitter<void> = new EventEmitter<void>();

@HostListener('focus', ['$event'])
focus(event) {
  this.myfocus.emit();
}

component.html

<input appDatepicker (myclick)="onClick()" />

Answer 2

If you want to handle host element events within a directive, you can make use of the @HostListener decorator.

@HostListener('focus', ['$event'])
focus(event) {
  console.log('Element has gained focus');
}

@HostListener('click', ['$event'])
click(event) {
  console.log('Element was clicked!');
}

@HostListener('blur', ['$event'])
blur(event) {
  console.log('Element lost focus');
}

Check out a demonstration here: https://stackblitz.com/edit/angular-bg7rpl

Emitting Custom Events

You also have the ability to emit your own events from the directive if desired.

directive.ts

@Output() myfocus: EventEmitter<void> = new EventEmitter<void>();

@HostListener('focus', ['$event'])
focus(event) {
  this.myfocus.emit();
}

component.html

<input appDatepicker (myclick)="onClick()" />

Modify the BehaviorSubject upon clicking or focusing on the input

Answer №1

Similar questions

Testing services in Angular that rely on TranslateService with unit tests

Is there a way to streamline the import process for material-ui components?

The form inputs within the modal are unresponsive to clicks

Creating a star-based rating feature through directive implementation

Customizing the appearance of selection dropdown options in React

Trouble with HTTPS request in Android fragment

What steps should I take to enable TypeScript IntelliSense to recommend correct suggestions within discriminated unions?

Creating a node.js function that can be used with OracleDB

Is there a way to show a fallback message for unsupported video file formats?

What is the proper way to utilize $apply and $watch in the Angularjs 1.4.10 Directive Structure?

Guidelines for choosing and uploading a file using Ionic

Error: The method .map is not a valid function in this context

How can I customize the styling of Angular Material Datepicker?

Updating a React event as it changes with each onChange event

Using AJAX to submit a form to a CodeIgniter 3 controller

Node.js bypasses unit test validation

"Utilize JavaScript to detect both the loading and unloading events on a webpage

Creating a data structure that consists of pairs of elements, inspired by the alignment of domino bricks, using TypeScript syntax

I provided Array.Filter with a function instead of a predicate, and surprisingly it gave back the entire array. How is that possible?

The global variable remains unchanged after the Ajax request is made