Angular Circular Dependency Solution

Question

I have popupservice that opens popup components for me like this:

export class PopupService {
    alert() { this.matdialog.open(PopupAlertComponent); }
    yesno() { this.matdialog.open(PopupYesNoComponent); }
    custom() { this.matdialog.open(PopupCustomComponent); }
}

Then I open my custom popup with this.popupservice.custom().

export class HomeComponent {
    constructor(private popupservice: PopupService) {}
    openCustomPopup() {
         this.popupservice.custom();
    }
}

Then, in my custom popup component I want to call my own alert popup (to report an error or something):

export class CustomPopup {
    constructor(private popupservice: PopupService) {}
    doHttpCall() {
         ...do http calls...
         if (callFailed) this.popupservice.alert('Call Failed');
    }
}

How can I solve this circular dependency problem?

Notes:

I have read the other questions but I feel that my problem is a specific "help me out" problem. Though you are still welcome to refer me to other questions.
The this.popupservice.alert() is not just a javascript alert, it is my own custom popup that has a theme and everything.

That 3rd party popup needs component reference to create the popup, doesn't it? — Bunyamin Coskuner
– Bunyamin Coskuner, Commented Nov 28, 2018 at 6:00

Bunyamin Coskuner · Accepted Answer · 2018-11-28 08:05:42Z

2

What you can do is to take away popup creation logic from PopupService. Here is a little refactor for you.

Use PopupService to only create events from different parts of the application.

@Injectable()
export class PopupService {
    private _alert: Subject<any> = new Subject();
    private _yesno: Subject<any> = new Subject();
    private _custom: Subject<any> = new Subject();

    // since you didn't like the on- methods, you can do following
    public readonly alert$ = this._alert.asObservable();
    public readonly yesno$ = this._yesno.asObservable();
    public readonly custom$ = this._custom.asObservable();

    onAlert() { return this._alert.asObservable(); }

    onYesno() { return this._yesno.asObservable(); }

    onCustom() { return this._custom.asObservable(); }

    alert(payload) { this._alert.next(payload); }
    yesno(payload) { this._yesno.next(payload); }
    custom(payload) { this._custom.next(payload); }
}

So, we have a PopupService which only emits some events with some payloads. I used Subject here because later subscribers won't need to know if there was a alert or yesno event earlier. If you want to have such logic, you can change Subject to BehaviorSubject.

Create a component called PopupManager and use it in app.component

app.component.ts

@Component({
    selector: 'app-root',
    template: `
        <!-- some template -->
        <app-popup-manager></app-popup-manager>
    `
})
export class AppComponent {}

@Component({
   selector: 'app-popup-manager',
   template: '' // don't need to have template
})
export class PopupManagerComponent implements OnInit {
   constructor(private matDialog: MatDialog, private popupService: PopupService) {}

   ngOnInit() {
       this.popupService.onAlert().subscribe(payload => {
       //   this.matDialog.open...
       });

       this.popupService.onYesno().subscribe(payload => {
       //   this.matDialog.open...
       });

       this.popupService.onCustom().subscribe(payload => {
       //   this.matDialog.open...
       });
   }
}

With this way, you can use PopupService in any component you want since it is a singleton, standalone service now.

Why you should not expose Subjects to outside world?

You can think of this encapsulating class fields. You could indeed expose _alert to outside world but then you will have no control over who uses this subject in what way. Methods are always great way to provide functionality while maintaining some control over the fields. In the future, you may want to change internals of the service, maybe some of the subjects. If you let other parts of the application access directly on fields, you would have to refactor a lot. But this way, since you are giving them some methods, as long as you don't break those methods you'll be fine.

edited Nov 28, 2018 at 8:05

answered Nov 28, 2018 at 6:38

Bunyamin Coskuner

8,8792 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Freddy Bonda Over a year ago

Dude this is perfect thank you! But you can remove the onX() functions right? Then in PopupManagerComponent just use this.popupService._alert.subscribe(...)

Bunyamin Coskuner Over a year ago

You should not access to subject directly, I'll put an alternative way to do it.

Freddy Bonda Over a year ago

Why should you not? You are returning the observable anyway so I feel like you can just skip the return function and access it directly. Why is this not a good idea?

Bunyamin Coskuner Over a year ago

It is like having private fields. You should encapsulate the subject and only let people emit events through methods.

Bunyamin Coskuner Over a year ago

I'll explain why you should hide Subjects.

|

Adrian Brand · Accepted Answer · 2018-11-28 05:53:13Z

2

Your service should not know about components, that is bad design if your services have knowledge of components. You should have an observable like a behaviour subject in your service and have your component subscribe to the observable to know when to popup a new message.

In your service

message$ = new BehaviourSubject<string>(null);

and a function to send a message down the pipeline.

nextMessage(message: string) {
  this.message$.next(message);
}

Then in your component you subscribe to the message$ observable and then do you popup.

this.messageSubscription = this.service.message$.subscribe(message => { this.popup(message); });

Making sure to takeUntil or unscbscribe on ngDestroy.

ngOnDestroy() {
  if (this.messageSubscription ) {
    this.messageSubscription.unsubscribe();
  }
}

answered Nov 28, 2018 at 5:53

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

1 Comment

Freddy Bonda Over a year ago

Does the popup listen to the observable and then open it self? I don't fully understand this. Would you mind putting your code into the PopupService, HomeComponent & CustomPopup please. That would help a lot!

Collectives™ on Stack Overflow

Angular Circular Dependency Solution

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related