Manejo de eventos HTML5 (onfocus y onfocusout) usando angular 2

Tengo un campo de fecha y quiero eliminar el titular de lugar por defecto.

Estoy usando eventos javascript onfocus y onfocusout para eliminar el marcador de posición.

¿Puede alguien ayudar con el uso de la directiva angular2?

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput">

Trato de resolver de esta manera, pero tengo problemas con restablecer el tipo de campo de entrada.

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);
      }
  }
 68
angular
Author: vishnu, 2016-05-16
Source

2 answers

Intenta usar (focus) y (focusout) en lugar de onfocus y onfocusout

Así: - 

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

También puedes usar así: -

Algunas personas prefieren la alternativa del prefijo on, conocida como la forma canónica: 

<input name="date" type="text" on-focus="focusFunction()" on-focusout="focusOutFunction()">

Conozca más sobre el enlace de eventos vea aquí.

Tiene que usar HostListner para su caso de uso

Angular invocará el método decorado cuando el elemento host emita el evento especificado.@HostListener es un decorador para el método callback/event handler

Vea mi Émbolo de trabajo de actualización.

Ejemplo de trabajo Émbolo de Trabajo

 130
Author: Pardeep Jain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-16 06:28:44

Si desea capturar el evento focus dynamiclly en cada entrada de su componente: 

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((<HTMLElement>this.el.nativeElement).getElementsByTagName('input'));
        inputList.forEach((input: HTMLElement) => {
            input.addEventListener('focus', () => {
                input.setAttribute('placeholder', 'focused');
            });
            input.addEventListener('blur', () => {
                input.removeAttribute('placeholder');
            });
        });
    }
}

Descargar el código completo aquí : https://stackblitz.com/edit/angular-93jdir

 2
Author: abahet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-18 12:34:42