Displaying a message in a modal popup once an existing modal popup has been closed - Angular

Hello, I am new to using Angular and I have a question. How can I show a success message in another popup after sending an email from a modal popup? Here is a snippet of my code:

<div id="modalViewImportCode" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Email</h4>
            </div>
            <div class="modal-body" >


                    <p>Selectemail</p>

                    <div *ngFor="let primary of email; let i=index;">
                        <div *ngIf="primary">
                            <div class="clearfix">
                                <div class="margin-5-15">
                                    <span class="pull-left modal3-checkbox">
                                        <input type="checkbox" id="txt{{i}}" [(ngModel)]="primary.Current">
                                        <label for="txt{{i}}"></label>
                                    </span>
                                    <span class="modal3-checkbox-label clsWordWrap width85per">{{primary.EmailAddress}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


            <div class="modal-footer">
                <button type="button" data-dismiss="modal" (click)="sendMail()" class="btn btn-default">Send Email</button>
            </div>
        </div>

    </div>

I made an attempt by adding the following code below the above part:

<div id="modalViewImportCodes" *ngIf="mailSent" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
 <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Email</h4>
            </div>
            <div class="modal-body">

                <p>Success Message</p>

            </div>
            <div class="modal-footer">

            </div>
        </div>

    </div>
</div>

The function sendMail() sends the email and if successful, sets "mailSent" to true.

Thank you for your help.

Answer №1

Hello Jithin,

Instead of creating a new dialog, you can simply use SweetAlerts after your AJAX request is completed; they are easy to use and very simple. Here are the steps you can follow:

Step 1:

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Step 2:

Insert this code in your desired location and modify the message accordingly:

swal("Good job!", "You clicked the button!", "success");

References:

For more options and guidelines, refer to the following URL:

Best regards

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

Ways to transform the DropBox chooser button into an image

I'm looking to incorporate an image in place of Dropbox's default chooser button. Despite reviewing their API documentation, I haven't come across any methods to use alternative elements for the Dropbox chooser. Does anyone have a solution f ...

Using AngularJS to generate multiple checkboxes from a nested JSON object

Looking for some help with rendering checkbox elements generated from a JSON object fetched via AJAX from a PHP file. Struggling to access the nested objects within. I've managed to display a select box with the main products, but when a product has ...

Tips for showing a DialogBox when a blur event occurs and avoiding the re-firing of onBlur when using the DialogBox

Using React and Material UI: In the code snippet provided below, there is a table with TextFields in one of its columns. When a TextField triggers an onBlur/focusOut event, it calls the validateItem() method that sends a server request to validate the ite ...

Get connected to your favorite music on iTunes without the hassle of opening a new window by simply clicking on the

Is there a way to call a link to iTunes (itms://...) without opening a new window? I've tried using window.open but that just opens a new window. Also, $.get('itms://...'); doesn't seem to work for me. Are there any other options avail ...

Managing route rendering in nuxtjs: A guide

I came across Goldpage, a tool that allows for route rendering control. Render Control - With Goldpage, you have the flexibility to choose how and when your pages are rendered. For example, one page can be rendered to both HTML and the DOM (classic serv ...

Navigate the child div while scrolling within the parent div

Is there a way to make the child div scroll until the end before allowing the page to continue scrolling when the user scrolls on the parent div? I attempted to use reverse logic Scrolling in child div ( fixed ) should scroll parent div Unfortunately, it ...

What are the steps for integrating DoctorJS with Emacs?

Is there a method to utilize DoctorJS (formerly known as jsctags) in order to create a TAGS file specifically for Emacs? I have been researching this topic and it appears that it typically defaults to the vi tags style, although I may be overlooking a str ...

The function $templateCache.get does not return a valid value

$http.get('template/alert.html', { cache: $templateCache }); $scope.clickedButton = function () { console.log($templateCache.info()); // <-- Object {id: "templates", size: 1} console.log($templateCache.get('alert.html')); ...

How to Monitor Store Changes within a Vue File Using Vue.js

I am working with 2 vue files, header.vue and sidebar.vue. Both components are imported into layout.vue. Here are the steps I am following: 1. Initially, when the page loads, I update the store in header.vue with some values inside the created hook. 2. ...

Issue encountered in NestJS/TypeORM: Unable to modify the property metadata of #<Repository> as it only has a getter method

When attempting to launch my nestjstutorial app, I encountered the following error message. The backend is connected to a PostgreSQL database. TypeError: Cannot set property metadata of # which has only a getter at EntityManager.getCustomRepository (D:&b ...

What distinguishes v-text from v-load in Vue.js when concealing {{ Mustache }}?

When experiencing the "flash of uncompiled content" in Vue, the brief moment when the page is loading and you see the {{ Mustache }} syntax, developers often use either v-text or v-cloak. According to the documentation, v-text: Updates the element’s t ...

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

I have a webpage with select menus for choosing user type, minimum age, and maximum age. I want to select options and send values as an object array to ajax. Initially, the getAjax function is working when the page loads. However, it stops working when I c ...

Using Angular's filter service within a controller

Just starting out so please be kind!! Encountering an issue with Angular 1.3 while using a Stateful Filter within a controller. In brief, when utilizing the $filter('custom')(data) method instead of the {{ data | custom }} method - and the cust ...

Discover an Effective Approach for Transmitting Form-Data as a JSON Object

Hey there! I'm encountering a bit of an issue with sending some data as a JSON object. The problem arises when trying to send images using FormData. It seems like I need to convert my form data into a single JSON object. Can anyone assist me with this ...

Installing npm without the need for Node.js can be achieved

Looking to set up an ASP.NET Core Web Application in Visual Studio 2015 and have plans to incorporate AngularJs2 with TypeScript editing. To make this work, I need to set up the npm Package Manager. Ideally, I want to install npm without node as I will n ...

Pattern for validating mobile numbers with extensions using regular expressions

I am struggling to combine multiple separate regex validations into one for my mobile number validation requirements. The criteria include validating mobile numbers with a country code or starting with 00, as well as checking if they contain an extension n ...

Dealing with numerous radio buttons

Can someone assist with the issue of the "idDefault" values not changing in this scenario? <div class="form-group" > <label class="control-label">Select Colors : </label> <div ng-repeat = "color in colorlist"> <input type="radio ...

How can I access the variable that evaluated as true in an if statement?

I'm facing a bit of a challenge with testing 2 variables for the same value. Is there a way to achieve this? var x = 'abc'; var y = 'def'; if (x=='abc' || y=='abc'){ z = 'result&a ...

Combining switch statements from various classes

Is there a way to merge switch statements from two different classes, both with the same function name, into one without manually overriding the function or copying and pasting code? Class A: protected casesHandler(): void { switch (case){ ...

When clicking on a checkbox's assigned label, Chrome and IE may experience delays in firing the change event

When a user checks a checkbox under a specific condition, I want to display an alert message and then uncheck the checkbox. To achieve this, I am utilizing the click function on the checkbox to internally uncheck it and trigger necessary events. I have a ...