Best practice for calling the NgbModal public method

Question

Playing with NgbModal and you want to call the open method → open(content: string | TemplateRef<any>, options: NgbModalOptions) <- from another place, except for the template code. In my case, I want to pass the string as a parameter when the method is run in the .ts file of my component. When you start the method using the button in the html file like this: <button (click)="open(content)">Launch demo modal</button> , the code works fine, of course, with all the code from <template></template> to html file.

Trying to do something with this:

 logoutScreenOptions: NgbModalOptions = { backdrop: 'static', keyboard: false }; lockedWindow: NgbModalRef; lockedScreenContent= ` <template #content let-c="close" let-d="dismiss"> <div class="modal-header" style="text-align: center"> <h3 class="modal-title">Title</h3> </div> <div class="modal-body"> <p>Body</p> </div> <div class="modal-footer"> <p>Footer</p> </div> </template> `; openLockedScreen(){ this.open(this.lockedScreenContent); } open(content) { console.log(content); this.lockedWindow = this.modalService.open(content, this.logoutScreenOptions); this.lockedWindow.result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } 

The code works without errors, and the modal opens like this: Modal without visualized content ... this is not quite what I want!

Also tried like this, with exactly the same result:

 lockedScreenContent= ` <div class="modal-header" style="text-align: center"> <h3 class="modal-title">Title</h3> </div> <div class="modal-body"> <p>Body</p> </div> <div class="modal-footer"> <p>Footer</p> </div> `; 

What am I missing? It would be impossible to simply pass the string as the parameter "content"?

It is impossible to see how to use the templateRef parameter from the ts file!

Answer 1

To date, the open method https://ng-bootstrap.imtqy.com/#/components/modal has the following signature: open(content: string | TemplateRef<any>, options: NgbModalOptions) . As you can see from this signature, you can open content that provides modal content, like:

• string
• TemplateRef

The string argument is not very interesting - in fact, it was mainly added to help with debugging / unit testing. Using it, you can only convey ... well, text, without any markup, and not Angular directives. Thus, it is really a debugging tool, and not something that is useful in real-world scenarios.

The TemplateRef argument is more interesting since it allows you to pass markup directives + for display. You can get your hand on TemplateRef by doing <template #refVar>...content goes here...</template> somewhere in your component template (the component template from which you plan to open the modal). Thus, the TemplateRef argument is powerful because it allows you to have markup, directives, other components, etc. The downside is that TemplateRef is only useful if you open a modal component from a component with a template.

I got the impression that you are looking for a planned, but not yet implemented function - the ability to open modal content with the type of component. It will work as follows: modalService.open(MyComponentWithContent) . As I said, this is part of the roadmap, but not yet implemented. You can track this feature by following https://github.com/ng-bootstrap/ng-bootstrap/issues/680

Answer 2

Now you can do the following ...

Let's say you have a model component. Confirm the model you want to use in any other component.

1. ModelComponentName added to declaration sections and entryComponent in module.ts
2. Remember to add NgbModule.forRoot () to the import file of your module, which contains the declarations you mentioned above.

3. Make sure the template component of your model is inside the div tag, not the ng-template tag.

Then you can use the following open method from any other component.

 modalReference: NgbModalRef; constructor(private modalService: NgbModal) { } this.modalReference = this.modalService.open(ModelComponentName, {backdrop: 'static',size: 'lg', keyboard: false, centered: true});