Issue with Angular modal not opening as expected when triggered programmatically

I am working with the ng-bootstrap modal component

import { NgbModal, ModalCloseReasons } from "@ng-bootstrap/ng-bootstrap";

When I click on a button, the modal opens as expected

<button class="btn labelbtn accountbtn customnavbtn"(click)="openModal(UploadModal)" type="button">   Open   </button> 


openModal(UploadModal:any) {
   
    this.modalService
      .open(UploadModal, {
        windowClass: "modal",
        ariaLabelledBy: "modal-basic-title",
        backdrop: false,
      })
      .result.then(
        (result) => {},
        (reason) => {}
      );
   
  }

However, when trying to open the modal through a function, only some elements are visible and content is not displayed properly.

async open(files){
      this.modalService.dismissAll();
      setTimeout(() => {
        this.openModal('UploadModal'); 
      }, 2000);

If you have any solutions or suggestions, thank you in advance

angulartypescriptng-bootstrapng-bootstrap-modal

Answer №1

Give this a shot:

function delay(ms) {
     return new Promise(resolve => setTimeout(() => 
     {this.clickButton('SubmitForm');}, ms));
}

async uploadDocument(files){
     this.modalService.closeAll();
     await delay(1500);
}

Answer №2

When adding a button in your HTML template, make sure to use the code demobutton(UploadModal). Remember that "UploadModal" should refer to a template, not just a string. For more information, you can check out the documentation, which specifies that content can be provided as a TemplateRef or a component type.

To access the template, you will need to use ViewChild:

@ViewChild('UploadModal') modal:TemplateRef<any>

// Use it like this by referencing "this.modal"
this.modalService
      .open(this.modal, {
        windowClass: "modal",
        ariaLabelledBy: "modal-basic-title",
        backdrop: false,
      });

Check out the updated demo here: stackblitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Docker brings up the login page, yet the node server.js for the MEAN stack isn't launching

Here's the latest configuration updates after adding a bounty: Configuration UPDATE: It seems that there is a CORS error occurring when trying to login, which is likely causing the problem. I've come across other posts, like this one, suggesting ...

node.jsangulardocker

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

I have an input box where a user can enter a number. When they click a button, I want that number to be displayed on the page. However, instead of seeing the number, I am getting the output as [object HTMLInputElement]. Below is my TypeScript code: let qu ...

javascripthtmltypescriptfunction

Firebase authentication link for email sign-in in Angularfire is invalid

Currently, I am utilizing the signInWithEmailLink wrapper from AngularFire for Firebase authentication. Despite providing a valid email address and return URL as arguments, an error is being thrown stating "Invalid email link!" without even initiating any ...

angulartypescriptfirebaseangularfire

I noticed that when using Next.js with the `revalidate: 1` option on a static page, it is triggering two full F5 refresh actions instead of just one. I was hoping for

Currently, I have set up a blog post edit page in my Next.js project. The post pages are utilizing the Incremental Static Regeneration feature with a revalidation time of 1 second for testing purposes. In the future, I plan to increase this to a revalidat ...

javascriptreactjstypescriptnext.js

Guide on incorporating Bootstrap 4 beta.2 into an Angular 4 project

After attempting to install Bootstrap 4 version beta.2 along with its dependencies (jquery and popper.js), I encountered a strange problem. A SyntaxError message kept appearing in the console, specifically stating "SyntaxError: export declarations may only ...

jqueryangulartypescriptbootstrap-4popper.js

What is the best way to compare dates in order to obtain the necessary results?

Question : Filter the JSON array to retrieve specific entries 1: All entries with name "Sam". 2: All entries with date "Dec 2019". // JSON Data provided below. var data = [{ "id":"27", "0":{ "name":"Sam", "date":"2021-02-28" ...

javascriptnode.jsangular

Encountering an issue during the installation of Angular CLI

I am encountering an error while attempting to install angular/cli on my 64-bit Windows 10 machine. The specific error I am receiving is as follows: npm ERR! code ENOGIT npm ERR! Error while executing: npm ERR! undefined ls-remote -h -t ssh://<a href=" ...

node.jsangularnpmnpm-install

Obtain the coordinates of the pixel in an image on the canvas when a mouse

I am currently working on a project that involves using canvas. I have set a picture as the background of the canvas and would like to be able to get the original pixel point when clicking in the image area. In order to achieve this, I need to convert canv ...

javascriptangularcanvas

IE11 does not support Angular2 Final

After working for a period of time, my implementation suddenly stopped. It seems that I may have imported a component or made some other change causing the issue. Strangely enough, it functions properly on Firefox, Chrome, and Edge, but encounters an error ...

angularinternet-explorer

When multiple Angular FormControls are present in a form, they always maintain their validity status

Currently, I have two inputs that are utilizing FormControl and always show as valid. However, when one is removed, the remaining input will display as either valid or invalid, as expected. Although I could replace the two form controls with a single Contr ...

angularangular-formsangular-validation

Issue with Angular 6 where data is not binding to the UI on initialization

I am struggling with binding dynamic data to the UI and Data tables on my website. Despite trying various methods, I have not been able to achieve success. Currently, I am using the smart admin latest theme for development. When I make a call to the API, ...

javascriptangulartypescriptangular6angular-cli

What is the procedure for disabling validation in the onValueChanged function within Angular?

Is there a way to disable validation in the onValueChanged function in Angular? Check out this demo I have a form where I change the device value upon completion. However, every time I click on the device (in the onValueChanged function), it triggers the ...

angularvalidationonchange

Challenges with overwriting TailwindCSS classes within a React component library package

I just released my very first React component on NPM. It's a unique slider with fractions that can be easily dragged. Check it out here: Fractional Range Slider NPM This slider was created using TailwindCSS. During bundling, all the necessary classe ...

reactjstypescripttailwind-css

Attention Needed - Certain vulnerabilities necessitate manual review for resolution

npm audit === Security Report from npm audit === # You have 1 vulnerability that can be resolved by running `npm update terser-webpack-plugin --depth 3` Severity Issue ...

angulartypescriptnpmionic4

Personalizing specific dates in mat calendar (Angular material)

I am facing an issue with marking the days that have tasks in the mat calendar. I have been trying to troubleshoot why this code is not working as expected. Below is the typescript code snippet: dateClass(): any { return (date: Date): MatCalendarCell ...

angularsassangular-materialcalendar

Designing a unique and customized theme for Angular 4

Exploring the world of Angular 4 and Angular Material is an exciting journey for me. Currently, I am delving into the creation of a custom theme in Angular 4. In order to achieve this, we make use of variables to assign colors to primary, accent, and warn ...

angularangular-material2custom-theme

The type 'Observable<unknown>' cannot be assigned to type 'Observable<Something>'

I am a beginner with Angular and Firebase, facing an issue while attempting to import of from rxjs and returning null using switchMap in my auth.service.ts. import { ActivatedRoute } from '@angular/router' import { Observable, of } from 'r ...

angularfirebaserxjs

Issue with form array patching causing value not to be set on material multiple select

When attempting to populate a mat-select with multiple options using an array of ids from Firestore, I encountered an issue. The approach involved looping through the array, creating a new form control for each id, and then adding it to the formArray using ...

javascriptangularangular-materialangular-reactive-forms

insert information into a fixed-size array using JavaScript

I am attempting to use array.push within a for loop in my TypeScript code: var rows = [ { id: '1', category: 'Snow', value: 'Jon', cheapSource: '35', cheapPrice: '35', amazonSource ...

javascripttypescript

What could be causing the import alias issue in the latest version of Next.js, version 12

Below are my CompileOptions: { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": false, "skipLibCheck": tr ...

typescriptnext.jsimportrefactoring