Angular | Run event on other button - html

Question

(Invalid question. You do not need to refer to it. Thank you.)
Solution : Use a common variable not $event.
I want to run the event on the other buttons.
I use $event, but I can not call function immediately.
.html
<p-fileUpload (onSelect)="runSelect($event)"
accept="image/*" #imageUpload></p-fileUpload>
<button (click)="callImageSelect()" #button2></button>
When button2 is pressed, I want to run (onSelect) event on #imageUpload.
(onSelect) have a parameter. (event.files: List of selected files)
If press button1 to run ,
and I want to put the default value in $event.
So the way I found is to use viewChild.
.ts
#ViewChild('imageUpload') imageUpload;
...
callImageSelect() {
this.imageUpload.**onSelect()**; // In this section, call (onSelect).
}
runSelect(event) {
event.files.push(defalut);
// Here I put the default value for event.
}
Is there a good way?
Thank you for your advice.

Answer 1

What you want is to trigger event onSelect. The point to be noted here is onSelect is not a function but event. You should not call the event instead call the function which actually triggers it.
Since you are using onSelect which is custom event so you must be using some Directive for the same. So what you should do is, access the Directive inside the component and call the function which triggers the event (EventEmitter);
Sue-do code
#Directive(selector="my-directive")
public class MyDirective {
value : string;
onSelect = new EventEmitter();
public selectionMade(){
this.onSelect.emit(value);
}
}
Component html
<button (onSelect)="runSelect($event)" myDirective #myDirective="myDirective"></button>
<button (click)="clickTest()" #button2></button>
Component ts
#ViewChild('myDirective') myDirective : MyDirective;
...
clickTest() {
this.myDirective.selectionMade(); // In this section, call (onSelect).
}