HTML5 event handling onfocus and onfocusout using angular 2

Question

I have a date field and I want to remove the place holder by default   I am using javascript onfocus and onfocusout events for removing placeholder   Can anyone help with using angular2 directive    lt input name  date  type  text  onfocus   this type  date    onfocusout   this type  text    class  dateinput  gt    I try to solving in this way  but i am getting problem with resetting the input field type   import   Directive  ElementRef  Input   from  angular2 core    Directive       selector    dateinput        host          focus     setInputFocus           focusout     setInputFocusOut              export class MyDirective         constructor el  ElementRef    this el   el nativeElement  console log this el           setInputFocus    void             console log this elementRef nativeElement value

User · Accepted Answer

Try to use  focus  and  focusout  instead of onfocus and onfocusout like this   -  lt input name  quot date quot  type  quot text quot   focus   quot focusFunction   quot   focusout   quot focusOutFunction   quot  gt   also you can use like this  -  some people prefer the on- prefix alternative  known as the canonical form    lt input name  quot date quot  type  quot text quot  on-focus  quot focusFunction   quot  on-focusout  quot focusOutFunction   quot  gt   Know more about event binding see here  you have to use HostListner for your use case  Angular will invoke the decorated method when the host element emits the specified event  HostListener is a decorator for the callback event handler method  See my Update working Plunker  Working Example  Working Stackblitz Update Some other events can be used in angular -  focus   quot myMethod   quot   blur   quot myMethod   quot    submit   quot myMethod   quot     scroll   quot myMethod   quot

User · Answer

The solution is this      lt input  click   focusOut    type  text  matInput  formControl   inputControl     matAutocomplete   auto  gt      lt mat-autocomplete  auto  matAutocomplete   displayWith   displayFn   gt        lt mat-option  onSelectionChange   submitValue  event    ngFor  let option of        options   async   value   option  gt          option name   translate         lt  mat-option gt     lt  mat-autocomplete gt   TS focusOut     this inputControl disable    this inputControl enable

User · Answer

If you want to catch the focus event dynamiclly on every input on your component    import   AfterViewInit  Component  ElementRef   from   angular core     Component     selector   my-app     templateUrl     app component html     styleUrls       app component css       export class AppComponent implements AfterViewInit      constructor private el  ElementRef           ngAfterViewInit               document getElementsByTagName  input     to gell all Docuement imputs        const inputList      slice call   lt HTMLElement gt this el nativeElement  getElementsByTagName  input             inputList forEach  input  HTMLElement    gt                input addEventListener  focus        gt                    input setAttribute  placeholder    focused                                input addEventListener  blur        gt                    input removeAttribute  placeholder                                          Checkout the full code here    https   stackblitz com edit angular-93jdir

User · Answer

I ve created a little directive that bind with the tabindex attribute  It adds removes the has-focus class dynamically    Directive       selector    tabindex      export class TabindexDirective       constructor private elementHost  ElementRef           HostListener  focus       setInputFocus    void           this elementHost nativeElement classList add  has-focus                HostListener  blur       setInputFocusOut    void           this elementHost nativeElement classList remove  has-focus

User · Answer

lt input name  date  type  text   focus   focusFunction     focusout   focusOutFunction    gt    works for me from Pardeep Jain

[angular] HTML5 event handling(onfocus and onfocusout) using angular 2

Update

Examples related to angular