The ng2-smartTable add form stubbornly refuses to close when we dismiss the window's confirmation popup

I'm encountering an issue with my smart table when attempting to use the add button within it. Despite calling event.confirm.reject();, the form remains visible as shown in the image below:

https://i.sstatic.net/3ojl6.png

The form, enclosed in a red rectangle, is the one causing the problem.

Below is the code snippet:

component.html:

<ng2-smart-table [settings]="settings" [source]="source" (createConfirm)="addFuction($event)"></ng2-smart-table>

component.ts

 addFuction(event) {
   if (window.confirm('Are you sure you want to create?')) {
     event.newData['libelle'] += ' + added in code';
     event.confirm.resolve(event.newData);
   } else {
     console.log('test');
     event.confirm.reject();
   }
}

Answer №1

If you believe there is an issue, rest assured that this is not a bug or error.

The add/edit-field does not close automatically, providing the user with the opportunity to see that the update/create did not succeed or was canceled. This allows the user to modify input data or manually close the add/edit-row as needed.

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

Angular 6 - Setting up radio buttons with Bootstraps

I am currently implementing Bootstrap's radio buttons functionality in my Angular 6 project. When using a button group, the active state should switch to the clicked button every time a different button is clicked. If this is confusing to understand, ...

What is the process for developing an Angular package that contains a collection of reusable pages and routes?

Is it possible to create Angular packages as a comprehensive reusable set of pages? If so, what is the fundamental way/architecture to implement it? Imagine having an Angular app and installing an npm package '@myuilibrary/account'. Suddenly, 11 ...

Getting data from the previous view upon clicking the browser's back button in Angular while navigating to a different view

I am facing an issue in my Angular application where I am trying to set up multiple views using routing. However, when I navigate to another view and then press the browser's back button, the previous view data is not retained and the page refreshes c ...

Organize rows in the table while maintaining reactivity

A challenge I'm facing with a web app (Angular SPA) is that it displays a large table without the ability to sort. To work around this issue, I've managed to implement sorting via the console. However, re-inserting the rows after sorting causes t ...

Guide to deploying a multilingual Angular application on Google App Engine

After successfully building my Angular 8 application using the angular/cli and incorporating i18n multilanguage support for English, Spanish, and French translations, I find myself with a new challenge. For each language version of my app that I build, it ...

Arranging a collection of objects in alphabetical order

My current challenge involves sorting an array of objects alphabetically, and to simplify things, I have provided the example below. In my TypeScript code, I utilize splice to add and remove items from the object array. Array cars = [{ id: 1, ...

Tips for launching a new page with a button click in React.js without relying on Routers

I am completely new to React and trying to figure out how to dynamically load a new page component within the main page without changing the URL. Essentially, I want to open up a fresh page upon clicking a button on the main page, displaying only the conte ...

Hello, I am looking for a way to maintain a user's active session when transitioning between different Angular applications without constantly prompting them to login. Can you help me

After logging in with my credentials, the session starts. However, if the user does not have an administrator role, I need to redirect them to another application. The challenge is maintaining the active session without requiring the user to log in again ...

Exploring the Concept of Extending Generic Constraints in TypeScript

I want to create a versatile function that can handle sub-types of a base class and return a promise that resolves to an instance of the specified class. The code snippet below demonstrates my objective: class foo {} class bar extends foo {} const someBar ...

Make Ionic 2 Navbar exclusively utilize setRoot() instead of pop()

When navigating to a different page, the ion-navbar component automatically includes a back button that uses the pop() method to return to the previous page. Is there a way to modify this behavior so that it utilizes the setRoot() method instead of pop(), ...

Duplicate routing configuration causing ngOnInit to be triggered twice

Here is my route setup: { path: 'menu/:level/:parent', component: MenuComponent, pathMatch : 'full' }, { path: 'menu', component: MenuComponent, }, I am trying to make it so that if the URL is menu/2/test, it will use ...

Hold off on moving forward until all RxJs Subscriptions have completed

Within my Angular 2 application, I am faced with the task of handling multiple HTTP requests. The two services, A & B, are responsible for making requests using A.get() and B.get() to retrieve data from the API and store it within their respective services ...

Encountered a problem while attempting to create a new project using angular/cli

I'm brand new to npm and Angular 2, and I'm attempting to set up a fresh Angular 2 project using angular/cli. My current setup includes: Node v8.9.3 npm v5.6.0 Windows 10 To start, I executed npm install -g @angular/cli successfully. Next, I n ...

Is it possible to integrate ngx Pagination with Bootstrap?

Is it possible to integrate Bootstrap's pagination with ngx Pagination? I'm interested in using the functionality of ngx Pagination but styling it with the CSS from Bootstrap. ...

What could be causing the index.tsx file to not locate the Clock Module?

Here is the code snippet I have in my index.tsx file. import Clock from "./utility/clock"; And this is my tsconfig setup. { "compilerOptions": { "sourceMap": true, "noImplicitAny": true, "module": "es6", "target": "es5", ...

Transform a String data type into a Class data type

When working in Java, we typically use the following code snippet: Class<?> classType = Class.forName(className); Is there a similar approach in Angular to accomplish this goal? ...

The Angular routing feature causes the URL to display a forward slash

When attempting to retrieve the current router path using Router in my Angular application, I encountered a discrepancy. Despite being on "/login", the console.log(this.router.url) shows "/", whereas inspecting the entire this.router object reveals that th ...

Incorporate and eliminate dynamic elements in Angular components

My Angular 12 code works perfectly, but things go awry when switching to version 16. import { ComponentRef, ComponentFactoryResolver, ViewContainerRef, ViewChild, Component, ViewRef } from "@angular/core"; import { ChildComponent } from ...

Retrieving asynchronous variables using callbacks in Angular 5's onload function

I am attempting to upload an image and retrieve its src using the FileReader. fileUpload(event) { var fr = new FileReader(); fr.onload = function() { getImgSource(fr.result) } } getImgSource(src) { console.log(src); } This results ...

How can a method be called from a sibling component in Angular when it is bound through the <router-outlet>?

In my current project, I have implemented an application that utilizes HTTP calls to retrieve data from an API endpoint and then displays it on the screen. This app serves as a basic ToDo list where users can add items, view all items, delete items, and pe ...