angularangular-directivecustom-directive

Is there a built-in Angular lostfocus event?


So I went ahead and implemented a custom directive:

@Directive({ selector: 'input[applostfocus]' })
export class LostFocus {
    @Output()
    applostfocus = new EventEmitter<any>();

    @HostListener('focusout', ['$event.target' ])
    focusout(input) {
        this.applostfocus.emit(input);
    }
}

It listens to the onfocusout DOM Event, and emits an event.

If it is included in the module, it can be used like this:

<input type="number" (applostfocus)="numberLostfocus($event)"></input>

public numberLostfocus($event) {
    console.log("applostfocus");
}

However my question is: can It really be, that a @Directive like this does not exist in Angular 7?

I've searched the web and there were only solutions for AngularJS. Also I've been looking at the official docs. The reason why I'm asking, is because this feels slightly overengineered and unnatural to do with such an advanced framework.

For instance, you wouldn't have to make a custom directive to listen on a click event:

<button type="button" (click)="somemethod()"></button>

I wrote this question to make sure I'm doing it right, and that I'm not reinventing the wheel. I'd expect answers like:

Edit:

It's actually documented here.


Solution

  • You can use (blur)="numberLostfocus($event)" for the same purpose. It's built-in.