¿Cómo usar el evento onBlur en Angular2?

¿Cómo detecta un evento onBlur en Angular2? Quiero usarlo con

<input type="text">

¿Alguien puede ayudarme a entender cómo usarlo?

Úselo (eventName)para vincular eventos a DOM, básicamente ()se usa para vincular eventos. También se usa ngModelpara obtener un enlace bidireccional para la myModelvariable.

Margen

<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">

Código

export class AppComponent { 
  myModel: any;
  constructor(){
    this.myModel = '123';
  }
  onBlurMethod(){
   alert(this.myModel) 
  }
}

Manifestación

Alternativa (no preferible)

<input type="text" #input (blur)="onBlurMethod($event.target.value)">

Manifestación

Para que el formulario controlado por modelo active la validación blur, puede pasar el updateOnparámetro.

ctrl = new FormControl('', {
   updateOn: 'blur', //default will be change
   validators: [Validators.required]
}); 

Documentos de diseño

También puede usar el evento (focusout) :

Úselo (eventName)para vincular eventos a DOM, básicamente ()se usa para vincular eventos. También puede utilizar ngModelpara obtener enlaces bidireccionales para su model. Con la ayuda de ngModelusted puede manipular el modelvalor de la variable dentro de su component.

Haz esto en un archivo HTML

<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">

Y en su archivo (componente) .ts

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log('Your method called');
   // Do something here
 }
}

puede utilizar directamente el evento (desenfoque) en la etiqueta de entrada.

<div>
   <input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

y obtendrá una salida en " resultado "

HTML

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

TS

removeSpaces(string) {
 let splitStr = string.split(' ').join('');
  return splitStr;
}

/*for reich text editor */
  public options: Object = {
    charCounterCount: true,
    height: 300,
    inlineMode: false,
    toolbarFixed: false,
    fontFamilySelection: true,
    fontSizeSelection: true,
    paragraphFormatSelection: true,

    events: {
      'froalaEditor.blur': (e, editor) => { this.handleContentChange(editor.html.get()); }}

Esta es la respuesta propuesta en el repositorio de Github:

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Github: feat (formularios): agregue la opción updateOn blur a FormControls

Intenta usar (focusout) en lugar de (desenfoque)