(Question) Using the modal inside a service

[AbdulRahmanAlHamali]

Hello,

I am trying to use the modal inside another service, it used to work before but now it doesn't anymore.

I have a service for error reporting, all components and services in the program use it to report errors to the user in an alert modal.

The error reporting service is injected into the application on bootstrap, however, I cannot seem to inject the modal service on bootstrap, because whenever I do this, tons of errors show up, and I can't seem to resolve them.

What is the general procedure that I should follow to use the modal inside a service that is instantiated at bootstrap time?

Thank you.

Regards,

[ZachHardin]

I ran in to this same type of issue, what I ended up doing was injecting the modal into the top level app component and emitting it into a ReplaySubject(1) in a base service so that I could get to from other services.

[AbdulRahmanAlHamali]

Thank you for your answer @ZachHardin

I tried to inject the modal into the top level app, but it always gave me weird types of errors.

Could you please provide a sample code of what you did?

[shlomiassaf]

There's no real logic in setting it in the bootstrap as it will not be able to display anything until the root component is created (a ViewRefContainer is mandatory). The only logic I can think of is having it available app wide, which has the same affect if you do it in the root component. But I can understand why you want to do it.

It's possible, you only need to consider the order of the providers.

import { bootstrap } from '@angular/platform-browser-dynamic';
import { MODAL_BROWSER_PROVIDERS } from './components/angular2-modal/platform-browser';
import { BS_MODAL_PROVIDERS } from './components/angular2-modal/plugins/bootstrap';

bootstrap(App, [
      ...MODAL_BROWSER_PROVIDERS,
      ...BS_MODAL_PROVIDERS
    ])

This sample loads the bootstrap plugin, note the order.

The error service should come after

[realcnbs]

I had same problem. I ended up creating a NotificationService like this:

import { Injectable } from '@angular/core';
import { Notification } from "./notification";
import { Observable, Subject } from "rxjs";

@Injectable()
export class NotificationsService {

    notificationsStream = new Subject<Notification>();
    notifications$: Observable<Notification> = this.notificationsStream.asObservable();

    add(notification: Notification) {
        this.notificationsStream.next(notification);
    }
}

And then created a ModalService which gets NotificationsService injected and subscribes to notifications. Something like this:

@Injectable()
export class ModalsService {

    constructor(private _notificationsService: NotificationsService,
                private _modal: Modal) {

        this._notificationsService.notifications$.subscribe(notification => {
            switch (notification.type) {
                case NotificationType.SESSION_INVALID:
                    this.showSessionTimedOut();
                    break;
                case NotificationType.COMMUNICATION_ERROR:
                    this.showCommunicationError();
                    break;
            }
        });

    }

    showSessionTimedOut(){
    // actual method using injected Modal
    }
}

[realcnbs]

Well, at least this worked before rc4. Now i get No provider for Modal!

[AbdulRahmanAlHamali]

Hello,

I was able to solve it by moving all my services into the root component, instead of the bootstrap.

Because at the bootstrap, adding BS_MODAL_PROVIDERS gives an error "Token is not defined". Which I think happens because as @shlomiassaf said, there is no component to be attached to.

My problem, however, is that I had to move all my services into the root component, it works, but it doesn't look that clean to be honest.

Thank you all.

Regards,

[igordeoliveirasa]

I'd like to know how to inject Modal inside a custom Service..

[piyukore06]

@AbdulRahmanAlHamali I am implementing the same type of Modal as you are ie, for error service, and as you mentioned, I tried to move my service to rootComponent, but still I am getting error zone.js?1477300678917:355 Unhandled Promise rejection: No provider for ViewContainerRef!

Would you pls want to share more light on how you got it working?

[AbdulRahmanAlHamali]

Hello What version of Angular2 and of Angular2 Modal are you using?

[piyukore06]

hi, I got it working the way you mentioned above, Just had missed something before, thanks for replying!

[BlankHrt]

@piyukore06 i met the same problem, i don't want move my service to rootComponent. could you help me ?