Use from a service about ngx-sweetalert2

[gcaraciolo]

It could be nice to document this!

[toverux]

Use the loader service:

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

@Injectable()
export class MyService {
    public constructor(private readonly sweetAlert2Loader: SweetAlert2LoaderService) {
    }
    
    public async doSomething() {
        const swal = await this.sweetAlert2Loader.swal;

        swal.xxx(); // <--- this sweetalert2 instance comes from the provideSwal function you defined in your module
    }
}

[netopolit]

Hi,
Importing swal directly didn't cross my mind :). That will do the trick. Thanks!

[toverux]

---

⚠️ Edit: New Answer

Don't do this anymore when using ngx-sweetalert2. Retrieve a reference to the swal API using the SweetAlert2LoaderService so you still benefit from the lazy loading of the sweetalert2 library (loads it when you need it), and your module configuration in forRoot()/forChild() if you have any 😉

---

Hi @Slzr, when using TypeScript, you should use:

import swal from 'sweetalert2';

Depending on you tsconfig.json strictness, this may throw a warning saying that sweetalert2 has no default export. In that case, use:

import * as swal from 'sweetalert2';

It's true that SweetAlert2 also defines itself on window, but it's better to use it like a module (and that's how it's described in the definition file).

[toverux]

@kctann It won't be easy as an Angular service can't hold a template. You would need to declare your service, and then have a component that is always loaded by your app (e.g. referenced by your root component), and that component could depend on the service, and register the SwalComponent instances of its template (retrieved in TypeScript via @ViewChild) to the service.

So yeah it's doable but it seems vastly over-engineered for no benefit in your case. I'd recommend you to stick with sweetalert2 alone for that.

If you still intend to use this integration in parallel for other modals, that are specific to some components for example, be careful to NOT import sweetalert2 in your service with import Swal from 'sweetalert2', instead, import it like this so you still benefit from lazy-loading!

And if you don't need ngx-sweetalert2 anymore, uninstall it, follow the SweetAlert2 docs instead and enjoy as well!

[toverux]

Hello,

Although it was originally planned, I don't really see the interest of this, since you can just:

swal({ title: 'Keep things simple :)' });

I'm not saying that a service is bad, but the amount of complexity it adds (to the library and userland code) does not seem so worthy (moreover, the goal of this library is also to enforce a declarative approach over an imperative one, and therefore reduce the amount of code in the code-behind).

However, I'm still open to discussion, and if you can provide a real use case for that I'd be happy to implement such a thing!

[salazarr-js]

I tried swal({ title: 'Keep things simple :)' }); but I gets error cannot find name, I missing something?

[cmn60]

Hello,

Although it was originally planned, I don't really see the interest of this, since you can just:

swal({ title: 'Keep things simple :)' });

I'm not saying that a service is bad, but the amount of complexity it adds (to the library and userland code) does not seem so worthy (moreover, the goal of this library is also to enforce a declarative approach over an imperative one, and therefore reduce the amount of code in the code-behind).

However, I'm still open to discussion, and if you can provide a real use case for that I'd be happy to implement such a thing!

Hi;
I'm trying to use an angular component as a swal, and create a service to open/close it.
the idea is to have a common swal that can be used by multiple components.
is that possible ?

[lixaotec]

Dear @toverux and @limonte

How to call it from a service that has been definied ForRoot with heightAuto ?
If i do import swal from 'sweetalert2'; it seems not to respect the heightAuto defined in root

thanks

[kctann]

@cmn60 Did you find the answer? I am trying this but just cant figure out. : (

[toverux]

@kctann it is possible with the library, but then, given your use case, why aren't you just using the sweetalert2 library alone? Or is there some feature of this integration you need?

[kctann]

@toverux ,thank you for the quick reply. I am trying to make my alert consistent (after calling API response), so I would like to pop out it with angular's service. I was wondering if we can have a bunch of different style's alert in one component, which is good to manage and encapsulate not only html but also css style. And when we get response , I can switch to the one to pop out. Or maybe the best way to do this is with the js library for now?
Thank you so much.