How can customClass be used in `swal` component?

[0x49D1]

I'm a bit new to Angular, but it seems that we can't override class of, let's say, confirmButton like we can with js SweetAlert2 using customClass property. Can we?

<swal
  #deleteSwal
  title="Delete {{ file.name }}?"
  text="This cannot be undone"
  icon="question"
  [showCancelButton]="true"
  [focusCancel]="true"
  (confirm)="deleteFile(file)"
 customClass="...."
>
</swal>

[toverux]

Using the directive only:

<button [swal]="{ customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' } }">Open swal</button>

Using the component:

<button [swal]="mySwal">Open swal</button>

<swal #mySwal [customClass]="{ confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' }"></swal>

Overriding globally for all swals in the app (use forChild to apply defaults in a particular submodule):

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

export function provideSwal() {
    return import('sweetalert2').then(({ default: Swal }) => Swal.mixin({
        customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' }
    }))
} 

@NgModule({
    imports: [
        SweetAlert2Module.forRoot({ provideSwal })
    ]
})
export class AppModule {
}

[0x49D1]

Thanks for such explanatory answer! Everything worked like it should ;)