@Output emit value from directive to parent component Angular 4

Question

I have some upload directive, that is very simple, only problem is that i have to emit value from this directive component to parent component. Does anybody know a simple solution? Thanks in advance. This is my directive for now:

upload-field.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

@Component({
  selector: 'app-upload-field',
  templateUrl: './upload-field.component.html',
  styleUrls: ['./upload-field.component.scss']
})
export class UploadFieldComponent implements OnInit {

  @Input() labelName: string;
  @Input() placeHolderValue: string;
  value = '';

  constructor() { }

  ngOnInit() {
  }

  uploadButton(event: any) {
    this.value += event.target.value;
    this.value = this.value.replace(/^.*\\/, '');
  }

}

upload-field.component.html

<input placeholder="{{placeHolderValue}}" disabled="disabled" class="form-control first-input" value="{{value}}" />
<div class="file-upload">
  <span class="btn btn-default btn-lg">{{labelName}}</span>
  <input type="file" class="form-control upload-button" (change)="uploadButton($event)" value="{{value}}" />
</div>

And I use it like this:

<app-upload-field [labelName]="'Blader'" [placeHolderValue]="'Kies bestand'"></app-upload-field>

Solution

You can use EventEmitter for this.

Reference: Parent listens for child event

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  //...your decorator properties
})
export class UploadFieldComponent { 
    @Output() onValueChanged = new EventEmitter<any>();

    uploadButton() {
       this.value += event.target.value;
       this.value = this.value.replace(/^.*\\/, '');
       this.onValueChanged.emit(this.value);
    }

}

In parent component, Template:

<app-upload-field [labelName]="'Blader'" [placeHolderValue]="'Kies bestand'" 
    (onValueChanged)=onValueChanged($event)>
</app-upload-field>

Within component code,

 onValueChanged(value) {
       // value will be the emitted value by the child
 }

The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events.

Comments

[Paritosh]

You have mentioned [myValueChanged]="parentEvent($event)" in your code, which is incorrect. [myValueChanged] is an event, you should use round brackets instead: (myValueChanged)

[Miomir Dancevic]

This is not good, Unable to resolve signature on property decorator when called as expression

[Paritosh]

@MiomirDancevic oh, that whas a typo. I missed the brackets for @Output(), did you checked the Angular reference link I provided?

[Snowbases]

@Paritosh can the uploadButton() trigger inside the parent component?

[Paritosh]

@SnowBases - not getting ur ques. you want to call uploadButton from its parent component? than yes, you can do it using ViewChild property attribute, blog.angular-university.io/angular-viewchild - use this to have child component's object and then call public methods of child component