how can I call a function from component A that is contained in component B and these components are on the same level

Question

I have something like this:

My components

<ComponentA></ComponentA>
<ComponentB></Componentb>

    import { Component, OnInit } from "@angular/core";
    @Component({
      selector: "component",
      templateUrl: "<button (click)=""></button>" //I need call fn_componentB
    })
    export class ComponentA implements OnInit {
      constructor() {}
      ngOnInit() {}

    }

    import { Component, OnInit } from "@angular/core";
    @Component({
      selector: "component",
      templateUrl: "./component.component.html",
      styleUrls: ["./component.component.scss"]
    })
    export class ComponentB implements OnInit {
      constructor() {}
      ngOnInit() {}

      fn_componentB() {
        alert("call");
      }
    }

I want that when I click on a button contained in my component A, a function is called which is contained in my component B(fn_componentB). How can I do it? I have tried viewchild, and output but am not sure in this case what is best.

the clasic: https://stackoverflow.com/questions/40788458/how-to-call-component-method-from-service-angular2/57669031#57669031 — Eliseo, Mar 16 '20 at 20:40

score 1 · Answer 1 · answered Mar 16 '20 at 16:46

You could do this by giving component B an ID and calling a public method in it like this;

<div>
    <app-component-a (click)="compB.doSomething();"></app-component-a>
    <app-component-b #compB></app-component-b>
</div>

Component B defines doSomething as a normal public method;

public doSomething() { }

how can I call a function from component A that is contained in component B and these components are on the same level

1 Answers1