CODEWITHSUNDEEP
angularcomponentssiblings
blk
blk

Reputation: 27

Angular - Calling myFunction from sibling1.component.ts in sibling2.component.html element

So, I have this two sibling components, sibling1.component and sibling2.component.

sibling1.component.ts

myFunction() {
  console.log('something');
}

And I want to call myFunction in the sibling2.component, like this:

sibling2.component.html

<button (click)="myFunction()"></button>

I've read some articles about sharing data, but didn't help me much.

Is there any proper way of doing this?

Thanks!

Upvotes: 0

Views: 34

Answers (1)

Mario Petrovic
Mario Petrovic

Reputation: 8352

There is no way of directly shading a method between sibling components.

What i recommend you do is, put myFunction from sibling1 to parent component and pass it down to sibling2.

If this does not work for you you can create a shared service that you provide to the whole application providedIn: 'root'. More on that you can read here: https://angular.io/guide/singleton-services

And inject that service in the constructor of sibling2 component and use it in that way.

Either way you can't do it directly but, i recommend to bring it up to parent component.

Upvotes: 1

Related Questions