how to solve circular dependency beside using interface in angular

Question

Component A

age = 5;

updateAge(){
    this.age++;
}

openpopup(){
    this.window.open({
        title:info,
        content: B_Component
    })
}

Component B

constructor(private a: A_Compoennt){

}
clickButton(){
    this.a.updateAge();
}

I have two component, component A and component B, there is no parent/child relationship between those two. There is a circular dependency problem between those two component. How do I solve this question without interface. When i check online, all the post says that use interface to resolve circular dependency.

What specific problem are you having with it? Circular dependencies aren't, in and of themselves, a problem. Separately, I'm afraid the above is too fragmentary for us to be able to help you with. Please update the question with a moer thorough description of the problem, and a [mcre] demonstrating it. — T.J. Crowder, Dec 12 '19 at 13:56
What about the use of a service? Why would you inject a component into another component's constructor? — monstertjie_za, Dec 12 '19 at 13:57
Does this answer your question? [Services depending on each other](https://stackoverflow.com/questions/36378751/services-depending-on-each-other) — Mickael Lherminez, Dec 12 '19 at 13:58

Selaka Nanayakkara · Answer 1 · 2019-12-12T14:17:44.057

What you are doing can be done easily with a shared service. A service which is common to both the components. you can use the getAge() method to in case if you want to retrieve the value of age and it will resolve your circular dependency issue. Take a look at the below code snippets:

common.service.ts

  @Injectable({
      providedIn: 'root'
    })
  export class CommonService {
      age = 5;

   updateAge(){
    this.age++;
      }

   getAge(){
    return this.age;
      }
    }

ComponentA:

    export class ComponentA {
        constructor(private brodcaster: CommonService){          
         this.brodcaster.updateAge();
        }
}

ComponentB:

    export class ComponentA {
        constructor(private brodcaster: CommonService){
         this.brodcaster.updateAge();
        }
}

how to solve circular dependency beside using interface in angular

1 Answers1