Best practice for calling the NgbModal open method

Patrik Nilsson

Toying around with the NgbModal and want to trigger the open method -> open(content: string | TemplateRef<any>, options: NgbModalOptions) <- from somewhere else than the template code. In my case case I want to pass a string as a parameter when running the method in the .ts file of my component. When running the method via a button in the html file like so: <button (click)="open(content)">Launch demo modal</button>, the code works great, of course with all the code from within the <template></template> in the html file.

Trying to accomplish 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)}`;
    });
}

Code runs with no errors, and the modal opens like so: Modal without rendered content ...which is not exactly 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? Wouldn't it be possible to just pass a string as the "content" parameter?

Can't see to get my head around how to use a templateRef parameter from the ts file either!

pkozlowski.opensource

As of today the open method of https://ng-bootstrap.github.io/#/components/modal has the following signature: open(content: string | TemplateRef<any>, options: NgbModalOptions). As you can see from this signature you can open a modal providing content as:

  • string
  • TemplateRef

The string-typed argument is not very interesting - in fact it was mostly added to aid debugging / unit-testing. By using it you can pass just ... well, a piece of text , without any markup not Angular directives. As such it is really a debug tool and not something that is useful in real-life scenarios.

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Vue best practice for calling a method in a child component

From Dev

best practice to abort action method

From Dev

Best practice for signaling that a method is deprecated?

From Dev

Best practice to implement copy method

From Dev

Best practice for calling save() many times

From Dev

Best practice for makefile calling other makefile

From Dev

Best practice for calling two different endpoints for a widget?

From Dev

Best Practice to avoid using 'ifs' for calling methods

From Dev

Best practice when calling self object methods

From Dev

Calling a external API class on Observer best practice

From Dev

Rust - Calling function with multiple types best practice

From Dev

Best practice for calling objects that are private members of a class?

From Dev

Best practice for email addresses in open source code?

From Dev

best practice to pass parameters between open pages

From Dev

Best practice for Open ID Connect with mobile client

From Dev

Is declaring a variable inside of calling a method bad practice?

From Dev

Best practice: weak reference to activity in static method

From Java

Best practice for a Java method returning multiple values?

From Dev

Best Practice for defining method type in python

From Dev

Best practice for long running tasks in onPause method

From Java

Best practice for passing many arguments to method?

From Java

What is the best practice to modify an object passed to a method

From Java

Best practice of using flags in Java method

From Dev

Share a method with all controllers : Best practice

From Dev

Best practice for returning in PHP function/method

From Dev

Is there a best practice for defining variables in _init_ method

From Dev

Best practice for multiple forms accessing same method

From Dev

What is the best practice for subscribe method in angular?

From Dev

Best practice for closing multiple Resources by a single method

Related Related

  1. 1

    Vue best practice for calling a method in a child component

  2. 2

    best practice to abort action method

  3. 3

    Best practice for signaling that a method is deprecated?

  4. 4

    Best practice to implement copy method

  5. 5

    Best practice for calling save() many times

  6. 6

    Best practice for makefile calling other makefile

  7. 7

    Best practice for calling two different endpoints for a widget?

  8. 8

    Best Practice to avoid using 'ifs' for calling methods

  9. 9

    Best practice when calling self object methods

  10. 10

    Calling a external API class on Observer best practice

  11. 11

    Rust - Calling function with multiple types best practice

  12. 12

    Best practice for calling objects that are private members of a class?

  13. 13

    Best practice for email addresses in open source code?

  14. 14

    best practice to pass parameters between open pages

  15. 15

    Best practice for Open ID Connect with mobile client

  16. 16

    Is declaring a variable inside of calling a method bad practice?

  17. 17

    Best practice: weak reference to activity in static method

  18. 18

    Best practice for a Java method returning multiple values?

  19. 19

    Best Practice for defining method type in python

  20. 20

    Best practice for long running tasks in onPause method

  21. 21

    Best practice for passing many arguments to method?

  22. 22

    What is the best practice to modify an object passed to a method

  23. 23

    Best practice of using flags in Java method

  24. 24

    Share a method with all controllers : Best practice

  25. 25

    Best practice for returning in PHP function/method

  26. 26

    Is there a best practice for defining variables in _init_ method

  27. 27

    Best practice for multiple forms accessing same method

  28. 28

    What is the best practice for subscribe method in angular?

  29. 29

    Best practice for closing multiple Resources by a single method

HotTag

Archive