Ndtyjky

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")

        }

    }





}

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.