CODEWITHSUNDEEP
angularng-bootstrapangular7
Maty
Maty

Reputation: 65

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

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


}

Upvotes: 3

Views: 8628

Answers (2)

Hossein Ganjyar
Hossein Ganjyar

Reputation: 823

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?

Upvotes: 0

Dan R.
Dan R.

Reputation: 648

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.

Upvotes: 2

Related Questions