Trigger ng-bootstrap modal programmatically

Question

Trigger ng-bootstrap modal programmatically

I have an Angular 4 page with a ng-bootstrap modal. My code is shown below.

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);
}
[...]

When I click the button, the modal opens. Now, I want to open the modal on ngChanges.

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

My issue is: How can I access the "content" here? Is there a way to get the ng-template programmatically? Thank you in advance!

angular typescript modal-dialog ng-bootstrap ng-template

Answer 1

Answer №1

If you want to access the content element within the specified class, you can do so by following these steps:

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

Make sure to import the necessary module at the beginning of the class:

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

Lastly, invoke the open method for that element during change detection:

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

Answer 2

If you want to access the content element within the specified class, you can do so by following these steps:

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

Make sure to import the necessary module at the beginning of the class:

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

Lastly, invoke the open method for that element during change detection:

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

Answer 3

Answer №2

It is important to note that starting from Angular 8, when using ViewChild you should include the static option: {static: false}

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

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

constructor(private modalService: NgbModal) { }

this.modalService.open(this.content);

Answer 4

It is important to note that starting from Angular 8, when using ViewChild you should include the static option: {static: false}

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

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

constructor(private modalService: NgbModal) { }

this.modalService.open(this.content);

Trigger ng-bootstrap modal programmatically

Answer №1

Answer №2

Similar questions

Ionic 3: Struggling to Access Promise Value Outside Function

Button in Angular gets stuck when a touchscreen is long pressed

Is there a way to modify the antd TimePicker to display hours from 00 to 99 instead of the usual 00 to 23 range?

Customizing HttpErrorResponse object properties in Angular

Error: Loki cannot be used as a constructor

The setTimeout() function caught in an endless cycle

Updating the state in React is causing significant delays

Trouble with modifying a cell in a TypeScript office script

Organize elements within an array using TypeScript

Creating duplicates of a div element with each click

Utilizing Typescript for Efficient Autocomplete in React with Google's API

Accessing the element reference within a custom attribute directive in Angular through a projected template using ngTemplateOutlet

Simple steps for Mocking an API call (Get Todos) using ComponentDidMount in React with Typescript, Jest, and Enzyme

Is it recommended to run JavaScript functions obtained from REST APIs?

Utilizing Angular RXJS to generate an array consisting of three different observable streams

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

Acquiring information from the service in Ionic 2

Creating asynchronous JavaScript constructors using a static method called "create" presents challenges when dealing with TypeScript types

Encrypt and decrypt your store with ngrx-store-localstorage

combineLatest will trigger only for the initial event