Perform an action after the Ngx Bootstrap modal has been hidden

My modal features a login button:

<button type="button" (click)="save()" class="btn btn-primary">
      login
</button>

Upon clicking the button, my desired outcome is to: first hide the modal, and second navigate to another route.

However, when I implement the following code:

save() {
     this.modal.hide();
     this.router.navigate(['login'])
}

I notice that the navigation occurs before the modal is hidden.

Is there a way for me to ensure the navigation only takes place once the modal has been successfully hidden?

I would prefer not to utilize timeouts or similar methods.

Answer №1

Implement the onHidden() method in your code

submitForm() {
     this.popup.close();
     this.popup.onHidden.subscribe(() => {
         this.router.navigate(['dashboard']) 
     });
}

Answer №2

In order to achieve this, make sure to utilize the onHidden property

executeSave() {
    this.customModal.hide();
    this.customModal.onHidden.subscribe(() => {
      this.router.navigate(["login"]);
    });
  }

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

My code cannot send a POST request successfully, even though it works fine in Postman

reg.ts var data = JSON.stringify({ "name": { "value": this.registerForm.value.email }, "mail": { "value": this.registerForm.value.email }, "pass": { "value": this.registerForm.value.password }, "field_user_type": { "value": & ...

The process of extracting values from an HTML tag using Angular interpolation

I am working on an Angular application that has the following code structure: <p>{{item.content}}</p> The content displayed includes text mixed with an <a> tag containing various attributes like this: <p>You can find the content ...

ng2 - Comparing DevExtreme and Telerik Kendo UI

Our team is embarking on a new software project utilizing Angular2, typescript, and HTML5. We are considering two options for UI components: - DevExtreme - Telerik Kendo UI Which of these would be the best choice in your opinion? Thank you! ...

Display the chosen HTML template in real-time

Recently, I started using Angular 2 and encountered an issue that I need help with. 1] I have created 2-3 templates for emails and SMS that will display predefined data. 2] I have also designed a screen with a dropdown menu containing options like email ...

Generating a hyperlink within an HTML file for other HTML files that reside in the same directory as the angular framework

Currently, I am developing a website for my final HTML project at university. This project uses Angular as the main framework. The task is to create 4 articles as separate HTML pages and have the article.component.html file contain links to these pages. I ...

ngFor loop is not displaying the correct values from the JSON object

Having some trouble making a REST call and displaying the results obtained. I've managed to successfully work with a simpler JSON data structure, but I'm struggling to get ngFor to properly process this particular data structure. I've tried ...

Tips for resolving the error message "Cannot use type 'string' to index type"

Currently, I am in the process of migrating a website from React to Next.js, and I am facing challenges when it comes to implementing i18n for SSR pages. I am following a tutorial provided at this link: I have already set up a lang folder and placed some ...

Efficiently Updating Property Values in Objects Using TypeScript and Loops

I have been looking into how to iterate or loop through a code snippet, and while I managed to do that, I am facing an issue where I cannot change the value of a property. Here is the snippet of code: export interface BaseOnTotalPaidFields { groupName ...

Compose a message directed to a particular channel using TypeScript

Is there a way to send a greeting message to a "welcome" text channel whenever a new user joins the server (guild)? The issue I'm running into is that, when I locate the desired channel, it comes back as a GuildChannel. Since GuildChannel does not hav ...

Troubleshooting why @HostListener seems to be malfunctioning

I implemented a drag event listener using the HostListener to determine if an element is being dragged inside or outside of the browser window. When the element is dragged inside the window, a "drop zone" div displays the message "Drop your files here". Ho ...

Create a constant object interface definition

Is there a way to create an interface for an object defined with the as const syntax? The Events type does not work as intended and causes issues with enforcement. const events = { // how can I define an interface for the events object? test: payload ...

What is the most efficient method for incorporating React into Wordpress while using Typescript?

Is it possible for me to utilize the React / React-Dom scripts that Wordpress has enqueued in my bundled javascript, while still being able to use the -dev installed React for development purposes? The javascript files are designed for a WordPress plugin ...

Angular 5 does not allow function calls within decorators

I encountered an issue while building a Progressive Web App (PWA) from my Angular application. When running ng build --prod, I received the following error: ERROR in app\app.module.ts(108,64): Error during template compile of 'AppModule' Fu ...

What is the frequency of page rendering in Angular 2 before displaying it?

I've been working with Angular 2 on a project lately. In my template, I have a simple div that triggers a function in my .ts file to display basic text like so: <div>{{ test() }}</div> test(): void { console.log("Test text") ...

I encountered an error while trying to access an Angular 2 CLI hosted on Azure that said, "Permission denied to view this page or directory."

Currently in the process of learning angular 2, I've decided to host an app on Azure using git. Despite having no prior knowledge of git, I am following instructions from this video. This is not my first time hosting a simple app. Upon pushing my app ...

When using Google Chrome, you may encounter an error message stating that the 'Access-Control-Allow-Origin' header in the response cannot be set to a wildcard '*' even when a specific URL is specified

In my web application, I've utilized Angular 9 for the frontend and nodejs for the backend. The CORS middleware setup in my Express JS server is as follows: const corsOptions = { origin: [ "http://localhost:4200", ...

Understanding the appropriate roles and attributes in HTML for a modal backdrop element in a TypeScript React project

Trying to create a Modal component using React and TypeScript with a feature that allows closing by clicking outside. This is being achieved by adding a backdrop element, a greyed out HTML div with an onClick event calling the onClose method. Encountering ...

Issues with implementing AddEventListener in InAppBrowser on IONIC 2

I am currently working on implementing AddeventListener to listen for 'Exit' and 'LoadStart' events in InAppBrowser within IONIC2. Here is my HTML: <button (click)="browsersystem('https://www.google.com')" > Visit URL& ...

How to make sure a bootstrap row fills the rest of the page without exceeding the height of the screen

In my Angular application, I am using bootstrap to create the following structure (simplified version). <div class="container"> <div class="header> <div class="mat-card> <!-- Header content --> < ...

Unable to retrieve props from server-side page to client-side component in a Next.js application router

Currently, I am utilizing app router alongside Next.js version 13.5. Within my /dashboard page (which is a server component), there is an ApiKeyOptions client component embedded. However, when attempting to pass props from the dashboard page to the ApiKeyO ...