Angular 7 + NG Bootstrap, open modal from a Service?

Question

i'm kinda new with Angular, im trying to make a service that checks localstorage and if the desired key isnt there open a Modal asking for a name to create that localstorage key.

However, the modal opens but I only see the "disabled" background and not the modal info.

I dont know what I'm doing wrong and I couldnt find a lot of info about this.

Dont know if a service its the right way to do this and I'd like some help with this. Also, service depending on another services its a good practice?

Here's the code:

import { Injectable } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { localStorageService } from './localStorage.service';

let template: `<ng-template #content let-modal let-c="close" let-d="dismiss">
                    <div class="modal-header">
                        <h4 class="modal-title">Insert Your Name</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="input-group">
                                <input [(ngModel)]='name' id="name" class="form-control" name="name">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-dark" (click)="saveName(name);c('Save Click')">Save</button>
                    </div>
                </ng-template>`

@Injectable({
    providedIn: 'root'
})

export class CheckuserService {

    private closeResult: String;

    constructor(private modalService: NgbModal, private lss: localStorageService, ) { }

    test() {
        if (this.lss.getStorage() !== "null") {
            this.modalService.open(template, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
                this.closeResult = `Closed with: ${result}`;
            }, (reason) => {

            });
        } else {
            console.log("Already logged")
        }
    }


}

Not related, but consider changing your `var` to `let` or `const`, in your template. Is a better practice. — dream88, Nov 12 '18 at 13:54
I am not so familiar with NgBootstrap but I assume you are missing some style you should be importing in your app. — Dan R., Nov 12 '18 at 13:59
@DanR. but this only happens when I open the template from this service, when I tested it on my component it worked without adding any style — Maty, Nov 12 '18 at 14:01
@Maty try moving the css to your styles.css so the css doesnt rely on shadow dom selectors(css scoping). — enf0rcer, Nov 12 '18 at 14:09
`Dont know if a service its the right way to do this and I'd like some help with this. Also, service depending on another services its a good practice?` That's valid as long as you don't have a circular dependency. — enf0rcer, Nov 12 '18 at 14:11
Move your template inside a `component` and then pass the component in `this.modalService.open(componentName)` - I'm not sure about rendering a string as a template — Rahul, Nov 12 '18 at 15:07

score 2 · Accepted Answer · answered Nov 13 '18 at 15:53

Sorry - I did not notice in my comment that you open the template from the service and the template is a string.

If you look into the documentation of NgBoostrap - it opens a TemplateRef or a Component type - not a string.

open open(content: any, options: NgbModalOptions) => NgbModalRef

Opens a new modal window with the specified content and using supplied options. Content can be provided as a TemplateRef or a component type. If you pass a component type as content than instances of those components can be injected with an instance of the NgbActiveModal class. You can use methods on the NgbActiveModal class to close / dismiss modals from "inside" of a component.

When you reference an <ng-template> inside a component like
ViewChild('tplRef', {read: TemplateRef}) myTplRef: TemplateRef;

It creates a TemplateRef object (which you later pass to NgBootstrap modal service). What you are trying to do on the other hand is to pass a string - which NgBootstrap does not support.

Therefore, you should pass the template reference / component as a parameter when calling your service.

score 0 · Answer 2 · answered Nov 27 '19 at 13:21

I've found a solution that is working for me:
https://gist.github.com/jnizet/15c7a0ab4188c9ce6c79ca9840c71c4e#gistcomment-3007209

After that, if you have error No component factory found for ..., so read this:
Angular 4: no component factory found,did you add it to @NgModule.entryComponents?

Angular 7 + NG Bootstrap, open modal from a Service?

2 Answers2