How can I manage focus states on an Angular 2 custom input component?

Question

I cannot find a way to manage through Angular 2 how a custom input gets its focus from a label (and its for attribute) and how to manage those states.

I'm trying to give my the same focus-and-blur behaviour that a regular has. Any ideas on that?

Thanks!

Answer 1

HTML have tabindex attribute, that makes any element focusable. http://w3c.github.io/html/editing.html#the-tabindex-attribute

Then in component you can listen focus event:

 @HostBinding('tabindex') tabindex = 0;

 @HostListener('focus')
 focusHandler() {
   alert('focused!');
 }