Blur not working - Angular 2

You can also try (focusout)="unfocusAreaInput()" on your div. That will fire when any focusable element inside the div loses focus (incl. when the element is removed) and some other element in the div isn't simultaneously focused.

If you want to know what element lost focus inside your div, you can pass that in like so: (focusout)="unfocusAreaInput($event.target)".

More information here: https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event

Your blur event is not working because your div can't receive focus in the first place. If you add tabindex="1" (1 can be replaced with any number) or contentEditable (this will make div's content editable) to your div, it will be able to receive focus and then blur event will work. Plus, you can then use focus instead of click.