swal change confirm button class 1

swal change confirm button class

Swal.fire({
    title: 'example text',
    buttonsStyling: false,
    customClass: {
    	confirmButton: 'example-class' //insert class here
    }
})

Here is what the above code is Doing:
1. We’re importing the Swal object from the sweetalert2 package.
2. We’re calling the fire() method on the Swal object.
3. We’re passing an object to the fire() method.
4. We’re setting the title property to ‘example text’.
5. We’re setting the buttonsStyling property to false.
6. We’re setting the customClass property to an object.
7. We’re setting the confirmButton property to ‘example-class’.

Now, let’s add a class to the confirm button.

In the src/app/app.component.ts file, add the following code:

import { Component } from ‘@angular/core’;
import Swal from ‘sweetalert2’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app’;
showAlert() {
Swal.fire({
title: ‘example text’,
buttonsStyling: false,
customClass: {
confirmButton: ‘example-class’
}
})
}
}

In the src/app/app.component.html file, add the following code:

In the src/app/app.component.css file, add the following code:

.example-class {
background-color: red;
}

Now, when you click the button, you should see a red confirm button.

Similar Posts