Open ng-bootstrap modal programmatically

Question

I've got an angular 4 page including a ng-bootstrap modal. My code looks like this.

foo.html

[...]
<button class="btn btn-sm btn-secondary material-icons"
(click)="open(content)">search</button>

<ng-template #content let-c="close" let-d="dismiss">
    content in here
</ng-template>
[...]

foo.ts

[...]
constructor(private modalService: NgbModal) { }
[...]
open(content) {
   let options: NgbModalOptions = {
     size: 'lg'
   };

   this.modalService.open(content, options);
}
[...]

Now when I click the button the modal opens. What I want to do now is open the model on ngChanges.

ngOnChanges(changes: any) {
   open(content)
}

My problem is: How do I get the "content" here? Is there any way to get the ng-template programmatically? Thanks in advance!

Vega · Accepted Answer · 2020-08-30 03:31:14Z

41

To access the content element inside the class, declare:

@ViewChild('content', { static: false }) private content;
                         ^for Angular8+

and add the corresponding import at the top of the class:

import { ViewChild } from '@angular/core';

and finally call open method for that element on change detection:

ngOnChanges(changes: any) {
   this.open(this.content);
}

edited Aug 30, 2020 at 3:31

answered Jul 16, 2017 at 22:02

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Bagaric · Accepted Answer · 2020-08-06 11:32:46Z

1

from Angular 8 you should also pass static option: {static: false} in ViewChild

import { ViewChild } from '@angular/core';

@ViewChild('content', { static: false }) private content;

constructor(private modalService: NgbModal) { }

this.modalService.open(this.content);

answered Aug 6, 2020 at 11:32

Ivan Bagaric

715 bronze badges

Collectives™ on Stack Overflow

Open ng-bootstrap modal programmatically

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related