Angular 2: How to call a method from another component

Question

I have a button in my html template that calls a method, but this method is not found in its own component. It's found in another component. What should I do?

HTML template:

<button class="ui button basic medium" (click)="showConfirmation()">Delete</button>

The showConfirmation() method is found in dialog-box.component.ts

In my showConfirmation(), I have a jQuery that allows viewing of a Semantic-UI modal

showConfirmation(show: boolean){
      $('.ui.small.modal').modal('show');
}

Answer 1

There is an entire chapter of the Angular documentation aimed to answer this question. You can find it here: https://angular.io/guide/component-interaction

The key options are:

• Pass data from parent to child with input binding
• Intercept input property changes with a setter
• Intercept input property changes with ngOnChanges()
• Parent listens for child event
• Parent interacts with child via local variable
• Parent calls an @ViewChild()
• Components communicate via a service

As mentioned in the text of these, all but the last assume that the two components have a parent/child relationship meaning that one of the components is nested within the other component.

Answer 2

One approach, in a parent-child relationship, would be to have the parent listen for an event on the child. The child needs an output: @Output() onShowConfirmation = new EventEmitter<boolean>(); and a function that emits an event on it like so:

showConfirmation(show: boolean) {
    this.onShowConfirmation.emit(show);
    this.confirmationShown = true;
}

Then, in the parent template, bind a function in the parent component to the output on the child component:

<confirmation-widget>
    (onShowConfirmation)="onShowConfirmation($event)">
</confirmation-widget>

This is just a modified version of the example in the docs linked below.

Alternatively, you can use a service to coordinate the two components. It really depends on their relationship. Take a look at the Angular docs here to see what would be the best approach given your configuration:

https://angular.io/guide/component-interaction#component-interaction

Answer 3

you can use viewChild decorator from angular core

 @ViewChild(dialogComponent)
  private localDialog: dialogComponent

showConfirmation() {

this.localDialog.showConfirmation();
}

you can get more details here