-3

I want to call myrole() of ComponentTwo in componentOne without parent child relation. ComponentOne is main component. After click on MyRoleClick() I want to call myrole() of ComponentTwo

export class ComponentOne{
  MyRoleClick(){
     want to call myrole() of ComponentTwo without parent child relation here.
  }
}

export class ComponentTwo{

 myrole(){

 }

}
Narm
  • 10,677
  • 5
  • 41
  • 54
yash
  • 203
  • 4
  • 12
  • 3
    Possible duplicate of [Angular 2 - How do you call a function in a sibling component?](https://stackoverflow.com/questions/39004684/angular-2-how-do-you-call-a-function-in-a-sibling-component) – Narm Jun 20 '19 at 15:51
  • not a sibling component @Narm – yash Jun 20 '19 at 15:52
  • Sounds like a sibling relationship. What is the relation of the components then, please provide more information and context. – Narm Jun 20 '19 at 15:54
  • They are independent component just two Component in different files to explain I have written one after another. – yash Jun 20 '19 at 15:54
  • That still sounds like siblings. Could you provide some code that demonstrates how you plan to use these components in the HTML? You're question the way it stand looks almost identical to [this post](https://stackoverflow.com/questions/37587732/how-to-call-another-components-function-in-angular2) – Narm Jun 20 '19 at 15:59
  • What do have in myrole() method? could u elaborate little bit of your requirement. May be there is a better approach to your issue rather calling a method in completely isolated component – Ntwobike Jun 20 '19 at 15:59
  • @Narm The "possible duplicate" might not help if the components are not included in the same file. – Maihan Nijat Jun 20 '19 at 16:01
  • 1
    As one of the answers to the duplicate shows, all the ways to communicate between components is described in the documentation: https://angular.io/guide/component-interaction. – JB Nizet Jun 20 '19 at 16:03

2 Answers2

2

A good solution for this problem would be creating a service that contains a rxjs subject so that the first component can subscribe and the second can emit values to inform the other one that it should call the function

EXAMPLE

export class ComponentOne {
    constructor(private myService: MyService) {}

    ngOnInit() {
        this.myService.subject.asObservable().subscribe(() => this.myRoleClick())
    }

    myRoleClick() {
        // DO something
    }
}

export class ComponentTwo() {
    constructor(private myService: MyService) {}

    myRole() {
        this.myService.subject.next();
    }
}

export class MyService {
    subject = new Subject<void>();
}
Fabio Carpinato
  • 1,121
  • 6
  • 13
1

I think the cleanest approach is to build a service (I.e. RoleService) which you use in both components. From your first component, invoke the method on your service, create an observable on your service which you emit a value to. In your second component subscribe to that observable. Make sure you provide your service high in your structure (for instance your app.module.ts) so your components will use the exact same instance of this service object.

Dennis
  • 371
  • 1
  • 9