How do you detect an onBlur event in Angular2? I want to use it with
<input type="text">
Can anyone help me understand how to use it?
Use (eventName) for while binding event to DOM, basically () is used for event binding. Also use ngModel to get two way binding for myModel variable.
Markup
<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">
Code
export class AppComponent {
myModel: any;
constructor(){
this.myModel = '123';
}
onBlurMethod(){
alert(this.myModel)
}
}
Alternative(not preferable)
<input type="text" #input (blur)="onBlurMethod($event.target.value)">
For model driven form to fire validation on blur, you could pass updateOn parameter.
ctrl = new FormControl('', {
updateOn: 'blur', //default will be change
validators: [Validators.required]
});
You can also use (focusout) event:
Use (eventName) for while binding event to DOM, basically () is used for event binding. Also you can use ngModel to get two way binding for your model. With the help of ngModel you can manipulate model variable value inside your component.
Do this in HTML file
<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">
And in your (component) .ts file
export class AppComponent {
model: any;
constructor(){ }
/*
* This method will get called once we remove the focus from the above input box
*/
someMethodWithFocusOutEvent() {
console.log('Your method called');
// Do something here
}
}
you can use directly (blur) event in input tag.
<div>
<input [value]="" (blur)="result = $event.target.value" placeholder="Type Something">
{{result}}
</div>
and you will get output in "result"