无法从一个组件向另一个组件发出函数

Question

I have two components in my angular file. one is the discussion component and under the discussion component, I created one more component called add-files component.

I want to emit a function from the discussion component to the add-files component.but I am not able to perform this activity.

you can see my efforts below. add-files component

@Input('removeFile')
  removeAttachments: boolean = false;

removeitem($event: string)
{
  alert("in file component");
  this.uploader.clearQueue();
}

discussion.component.html

<div class="col-12 col-sm-6 col-lg-6">
            <input type="submit" value="Send" (click)="removeitems1()" class="greenBtn float-right addCommentsBtn"
              [disabled]="commentForm.pristine || commentForm.invalid" onclick="closeCommnetPopupBox()">
          </div>

<app-add-files  (removeitems)="removeitem($event)"></app-add-files>

discussion.component.ts

removeitems1()
{
  alert("called");
  this.sessionService.SetSessionItem("removeUploadfile","true");
  //this.comp.removedoc();
  this.removeitem.emit("hi");
}

you can see from the above code I want to emit the function in the add-files component whenever the user will click on the submit button.

the above code is not working and I am new to the Angular. can anyone suggest something?

Answer 1

There are two options which you can go for. The first one is similiar to your way. The issue is that you pass the event once. But you want to get triggered each time it is changed:

@Input() set removeFile(data: boolean) { this.anyFunction(data); }

anyFunction(data) {
  // do some code here
}

The second option is to create a service (which I recommend to you). You can do that by angular-cli (ng gs servicename).

discussion.service.ts:

export class DiscussionService {

  buttonClick: EventEmitter<boolean> = new EventEmitter();

  constructor() { }
}

By that, you created a service with an EventEmitter that is available for each component which includes the service. You can read more about EventEmitters here https://angular.io/api/core/EventEmitter . To sum it, you just need to emit the event by your component:

discussion.component.ts:

constructor(private discussionService: DiscussionService) { }

clickFkt() { this.discussionService.buttonClick.emit(true) }

discussion.component.html:

<input (click)="clickFkt()">

Now you can subscribe von every component to your service:

add-files.component.ts:

constructor(private discussionService: DiscussionService) { }

ngOnInit() {
   this.discussionService.buttonClick.subscribe(click => {
       this.anyFunction(click);
   });
}
anyFunction(data) {
   // do some code here
}