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**:

```html
<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?