Is it possible to apply CSS to the alert and confirm functions in Angular?

Currently, I am facing an issue with implementing CSS on elements that are nested inside a function. I am unsure of how to access them properly.

For example:

updateUser() {
      this.usersService.UpdateUser(this.user.id, this.user)
      .subscribe(() => {
          alert("Password changed! You are taken to the login page")
          this.router.navigate(['login']);
        },(e)=> {
          this.errors = [];
          if (e.error.errors.Password) {
            this.errors.push(e.error.errors.Password);
          } 
        }
      )
    }

Specifically, within this function, I am trying to apply CSS to the alert message:

alert("Password changed! You are taken to the login page")

As well as to the confirmation dialog:

  deleteUser(id:string,user:User){
    if(confirm(`Are you sure you want to delete user ${user.userName}`)){
      this.usersService.DeleteUser(id)
      .subscribe(
        () =>{
          this.router.navigate(['login']);
        }
      )
    }
  }

Within this function, I am looking to style the confirm dialog box that prompts:

   if(confirm(`Are you sure you want to delete user ${user.userName}`)){

Answer №1

Styling an alert() or confirm() function using HTML code is not possible.

This is a sample of HTML Code:

<div style="position:absolute; width: 200xp; height:50px;background-color:white; border-radius:10p;padding:10px;"><button onclick="TheFunctionAfterConfirm()">Confirm</button>
<button onclick="TheFunctionAfterDisagree()">Disagree</button><div>

An alternative approach would be to utilize a library like sweetalert2 ().

If you encounter any issues, consider importing the necessary scripts into your main code.

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 7 service utilizes HttpClient to retrieve stock data in the component's TypeScript file

Why am I getting an undefined result? I am using a contact API in my service to fetch data for the component HTML, but when I log the result, it is coming up as undefined. element: any ; constructor(private service: BlockService) { } ngOnInit() ...

Set the button to align on the left side within a Bootstrap card

Creating grid elements in Bootstrap 3, I am faced with a challenge. When the viewport is below <768px, I want to align a button in the same position as shown in the image with the lion. Check out the demo site here. For viewports >768px, the button ...

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

I've been attempting to create a basic dropdown menu using Bootstrap dropdown, and so far, it's been working perfectly in most instances. However, on certain pages, when I click on the three dots that are supposed to activate the dropdown, nothin ...

CSS Dropping Down Menu Design

Hello everyone! I am taking my first step into web development and currently in the process of revamping my DJ website. Check out my updated site here: I am working on creating a dropdown div within the top-left menu that will display information about t ...

Creating reversed/generate URLs from Routes in Angular2 (using typescript)

Is there a way to automatically create a URL from a route using code? For instance, let's say I have a login component defined in my routes: const appRoutes: Routes = [ ... { path: 'login', component: LoginComponent }, ... ]; N ...

Firing an Event with a specific target value using Jasmine

Is there a way to trigger a change event in a Jasmine unit test with the inclusion of a target.value? The component being tested contains a method similar to this: @HostListener('change', ['$event']) onChange(event) { const value = e ...

Strategies for resolving npm cache errors within an npm package module

Recently, as I was developing an Angular application, I faced some errors. Here's a snippet of the issues encountered: npm ERR! Unexpected end of JSON input while parsing near '...,"karma-qunit":"*","k' npm ERR! A complete log of this run c ...

Navigating to the left while implementing right-to-left formatting on a single webpage

I'm currently working on a website and I decided to make it right-to-left (RTL). Everything looks good on the website, except for one specific page. I'm experiencing some difficulties in implementing RTL on this particular page. Although the ot ...

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

Code Snippet: Adjust Table Column Alignment using CSS

Apologies for the basic question, as I am new to CSS. Below is the UI that I am working with: https://i.stack.imgur.com/crAYE.png Here is the code that corresponds to the UI: <div class="row centered-form center-block"> <div cla ...

What steps can I take to resolve the keyboard problem with Ionic Capacitor?

Currently, I am working on a straightforward Ionic Capacitor application. My objective was to display or hide the keyboard based on certain scenarios. Despite referring to the capacitor documentation for assistance with the keyboard functionality, I encoun ...

What methods are available to pass a variable value between two components in Angular 2?

I've been experimenting with Angular2 and recently created a component called appmenu using angular cli. The code in appmenu.html looks like this: <ul> <li (click)="menuitem1()">Menu Item 1</li> <li>Menu Item 2</li> ...

Struggle with the accordion collapse animation in Bootstrap4?

My implementation of accordion collapse in Bootstrap 4 is functional, but lacks smoothness. Can anyone offer suggestions on how to improve this? I have attempted to nest divs inside each other, but it has not yielded the desired outcome. Below is the code ...

Aligning the Navigation icons on my webpage

<nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?about">About</a></li> <li><a href="index.php?products">Products</ ...

Issue with Vuetify carousel not resizing to fit the entire width and height

I am looking to create a carousel that spans the entire width and height of a viewport in my Vue.js 2 project using Vuetify. Below is the code I have so far: <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500, ...

Step-by-step guide on deploying an app folder containing both Backend and Frontend folders to Heroku

I recently developed a new app named my-folder-book, which consists of two folders known as my-folder-front and my-folder-back. These folders are built using React and NodeJS. Could someone please assist me with uploading this app folder? I am having trou ...

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

Tips for concealing the body description on the homepage of a blogger website

I want to conceal this description This is my blog and I am facing an issue where I need to hide the description on the home page. I have tried using color:white which worked initially, but when I moved the description to the top or left, the black backgro ...

Is it possible for me to include a static HTML/Javascript/jQuery file in WordPress?

My extensive HTML file contains Javascript, jQuery, c3.js, style.css, and normalize.css. I am wondering if I can include this file as a static HTML page within Wordpress. Say, for instance, the file is called calculator.html, and I want it to be accessib ...

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...