How to handle input events on custom input component in Angular? - html

Question

I'm trying to create a custom Input component using Reative Form in Angular 7 but i'm having trouble passing events to the input field.
My component has a label and an input field and a specific layout. My component html looks like this:
<div id="customInputGroup" [formGroup]="parentFormGroup" [ngClass]="{'input-value': hasValue()}">
<label [for]="inputId">{{label}}</label>
<input [id]="inputId" [name]="inputName" class="form-control" [placeholder]="placeholder" [formControlName]="inputName" [mask]="mask">
</div>
And in my Component:
#Component({
selector: 'app-input-field',
templateUrl: './input-field.component.html',
styleUrls: ['./input-field.component.css']
})
export class InputFieldComponent implements OnInit {
#Input('placeholder') placeholder = '' ;
#Input('label') label = '';
#Input('inputId') inputId = '';
#Input('inputName') inputName = '';
#Input('parentFormGroup') parentFormGroup:FormGroup;
#Input('mask') mask;
constructor() { }
ngOnInit() {
}
hasValue(){
return (this.parentFormGroup.get(this.inputName).value != undefined
&& this.parentFormGroup.get(this.inputName).value != null
&& this.parentFormGroup.get(this.inputName).value != '')
}
Everything was working fine till i had to handle an input onBlur event(or it could be any other input event).
The result i want is to call my component passing any event like this:
<app-input-field (blur)="functionName()"></app-input-field>
or
<app-input-field (keyup)="functionName()"></app-input-field>
And my component will be able to pass these events to my input field 'dynamically'. Is it possible to do it?

Answer 1

Events like blur works on input field , not selectors like <app-input-field>
You can emit event for all events like blur, keyup, mouseover etc..
InputFieldComponent:
HTML:
<input (blur)="functionName('blur')" (keyup)="functionName('keyUp')" [id]="inputId" [name]="inputName" class="form-control" [placeholder]="placeholder" [formControlName]="inputName" [mask]="mask">
TS:
#Output() OnInputEvent= new EventEmitter();
functionName(eventName) {
this.OnInputEvent.emit(eventName);
}
In your component:
<app-input-field (OnInputEvent)="functionName($event)"></app-input-field>
TS:
functionName(event) {
switch (event) {
case "blur":
...
break;
case "keyUp":
...
break;
}
}
Working Demo

Answer 2

for blur event you need to create a eventemitter with the same name and emit this event on input elemnt blur emit
export class InputFieldComponent implements OnInit {
#Output() blur:EventEmitter<any> = new EventEmitter(); // 👈
constructor() { }
ngOnInit() {
}
}
template
<input type="text" (blur)="blur.emit($event)" >
app.template
<app-input-field (blur)="onBlur($event)" (keyup)="onKeyup($event)"></app-input-field>
we did this for the blur event because the event is not bubble where the keyup will work without create any custom event because it bubble.
demo 🔥🔥
you can implement two way data binding like this
#Input() value:EventEmitter<any> = new EventEmitter();
#Output() valueChange:EventEmitter<any> = new EventEmitter();
template
<app-input-field [(value)]="name" ></app-input-field>
demo 🌟🌟
any bubble event like input,keypress,keyup,keydown you can capture on the element itself or you can work around it like what we did on blur event.