Is there a way to prevent closing when there are pending changes without success?
this.dialogRef.beforeClosed().subscribe(() => {
this.dialogRef.close(false);
//some code logic
//...
});
The setting disableClose on MatDialog must remain as false
When initially engaging in a conversation, consider setting 'disableClose' to true in order to manually close the dialog later by clicking on the backdrop or pressing escape key if there are no pending updates.
this.dialog.open(DialogComponent, { disableClose: true });
dialogRef.backdropClick().subscribe( () => {
if(!pendingChanges) dialogRef.close();
// otherwise, take no action
});
In certain scenarios, you have the option to start with setting disableClose as false, allowing the user to close it if there are no pending changes. However, depending on the nature of the pending change (such as an asynchronous call), you may need to switch disableClose to true.
Another approach is to inject the MatDialogRef directly into the component and manually control disableClose based on your specific requirements, like so:
constructor(private matDialogRef: MatDialogRef<WhateverYourDialogIsCalled>) {}
Then, in the case of an asynchronous call, you could do something like this:
onSubmit() {
this.matDialogRef.disableClose = true;
this.myService.doSomething().subscribe(_ => {
this.matDialogRef.disableClose = false;
});
}
When I send an object with two values - an array and a simple variable - it is received in another component using observable. From there, I access the object values directly in the HTML template file. Below is the code snippet: Home Component: // Home ...
I have the following unique css classes .swap-format{ background-color: green; } .swap-format1{ background-color: orange; } .swap-format2{ color: purple; } Using these classes, I want to create an animation on the given div <div id="swap-clas ...
I'm facing an issue in my code where I am trying to fetch data from two different JSON files and then return them as arrays. Even after implementing the solution below, it doesn't seem to be working as expected. Can someone guide me on how I can ...
Greetings! I am currently working on a web application using AngularJS. I have a date value in AngularJS, for example 13-10-2017. In C#, I have the following field: public DateTime LicenseExpiryDate { get; set; } When I send 13-10-2017 in an AJAX reques ...
I have recently entered the world of web development and I am facing an issue where I am trying to retrieve a Bitmap Value from a web api in order to display it on an HTML page using JavaScript. However, despite my efforts, the image is not getting display ...
I am in the process of rewriting a function in Node.js for generating and verifying checksums for payment transactions. I am new to coding in Node.js and need some guidance. The code I have received from the Service Provider needs to be converted into Nod ...
I seem to be facing a common issue that many others have encountered. Despite my understanding that global variables can be modified inside functions in Javascript, I am struggling with this concept in practice. var lastMessage = 0; function loadChat() { ...
Currently, I am developing an angular application with ng9. I have a specific div where I need to display an avatar using an image fetched from the API in my component.ts file: .... export class HomeComponent implements OnInit { nextLaunch$: Observabl ...
Encountering a problem with Ionic 2 and custom components. Developed a component to show in a list, serving as the list item. However, my app crashes when attempting to use the custom HTML tag. The stack trace is provided below. Uncertain about the issue. ...
Currently, I am developing a React application using altjs as my Flux implementation. I have encountered an issue where when attempting to create or delete an item from the front end, regardless of the parameter passed to the function, the entire state is ...
When attempting to utilize the node-ar-drone package to control an AR Parrot Drone 2 and interface with it, I encounter errors after connecting to the drone's wireless network on my OSX Yosemite: 587214779:examples mona$ node png-stream.js Connectin ...
Creating a Ruby app for tracking bets, I have designed a small form that captures various details including date and match. However, the most crucial components of this form are the "stake" and "odd" text fields. To enhance user experience, I have incorpor ...
While working on a React / TypeScript project, I encountered an error involving destructuring an object. The issue arises when I try to destructure notificationData within the publish function. An error message stating "Property 'messages' does ...
I attempted to add a transition on the transform property, but unfortunately, it did not produce any visible changes. I tested other properties such as: background-color, color... and they worked perfectly fine. live code: source code: // styled-compo ...
I am in the process of designing a navigation bar. I have created an array to store the information of the tabs present in the nav bar. tabs: [ { name: 'All',id: "dash.courses.all", to: 'all', curre ...
Having trouble creating a scatterplot with zoom functionality where only the axis is getting zoomed, not the data itself. Can anyone provide some assistance or insight on what might be wrong? If you're interested in checking out the project, here&apo ...
I am having trouble getting my alert to display when the form is not validating. It should show an alert message if the form is valid but it's not working as expected. I've spent hours trying to fix this issue with no luck. I appreciate any help ...
Is there a way to change the weekday display in Material UI DatePicker from single initial (M, T, W, T, F, S, S) to three-letter initials (MON, TUE, WED, etc)? I want to customize it in my component like this: <DatePicker disablePast disableTool ...
I am encountering an issue while trying to verify the ID token for my client using Google's example. You can find the example code here. const {OAuth2Client} = require('google-auth-library'); // <-- facing issues here const client = new ...
Hey guys, I'm really stuck on this problem and I can't seem to find a helpful tutorial anywhere. I've got a form with two drop-down menus, each with a "value" attribute. What I want is for users to be able to select an item from both drop-do ...