How to use Angular Template Syntax inside alerts about ngx-sweetalert2

[toverux]

You can't without this library :)
If you really don't want it - no questions asked - you can inspirate yourself from swal.directive.ts for the core of the feature, swal-portal-targets.service.ts for the modal query selectors and swal-portal.component.ts for the component that holds the user-provided views, but you may not need this one if you have only that bar-rating use case - in this case you could just put you bar-rating component in your entryComponents and instantiate it in lieu of my SwalPortalComponent.

[toverux]

Unfortunately, no, this is not possible for now.

You can effectively pass HTML via the html option, but this must be normal, standard HTML. You are using the Angular template syntax here.
I cannot either parse it using the Angular Compiler before passing it to SweetAlert2, because production builds of Angular do not embed the JiT compiler.

The solution I see would be to use a template or transclusion, but both require an update of ngsweetalert2.

I will add that to my todo list, but I'm afraid you have to find another solution for now.
I suggest you to programmatically generate a string containing your list, and pass that HTML string to SweetAlert2.

[toverux]

Did some research over time and still don't know if that's actually possible.
If someone knows how to do that, (s)he's welcome!

[shayts]

I had the same problem and eventually did the following:

    <div class="row video-format-row">
        <div class="col-3 video-format-col">
            <select class="form-control" [(ngModel)]="selectedVideoFormat">
                <option value='3'>mp4</option>
                <option value='2'>avi</option>
            </select>
        </div>
    </div>
</span>

swal({
title: "some title",
html: '',
showCancelButton: true,
onOpen: function (val) {
let spanList = val.getElementsByTagName("span");
let swalSpan: HTMLElement;

            for (let i = 0; i < spanList.length; i++) {
                if (spanList[i].id === "swalSpan") {
                    swalSpan = spanList[i];
                    break;
                }
            }

            let picker = document.getElementById('innerRangePicker');
            swalSpan.appendChild(picker);
        },
        onClose: function () {
            let picker = document.getElementById('innerRangePicker');
            let pickerHolder = document.getElementById('rangePicker');

            pickerHolder.appendChild(picker);
        }
    });

I'm not sure if this is the best solution but that is the best I could think of.
Maybe it can help someone with a similar problem.

[toverux]

Good news! This is now possible with the v.3 release! https://github.com/toverux/ngx-sweetalert2/releases/tag/v3.0.0
Beware that the package changed name (everything is explained in the release notes).

[behroozbc]

how can I use <br> in text property ?

[toverux]

You have to use [html]="Hello<br>World" for that. SweetAlert2 does not allow HTML "by default" (with that text property) to avoid possible unforeseen security vulnerabilities, ie. your alerts display user-defined content that is not sanitized. If you control the displayed content (seems that's your case here) or you are sanitizing it upstream, then it's fine to use html of course.

The original option property html is documented here: https://sweetalert2.github.io/#configuration
Supported by ngx-sweetalert2 with the [html] Input here: https://github.com/sweetalert2/ngx-sweetalert2/blob/master/src/swal.component.ts#L34

You can also use the *swalPartial directive for more complex use cases and templates, it is documented here: https://github.com/sweetalert2/ngx-sweetalert2#swalpartialdirective

[jongbonga]

Hi

I'm not using the ngx-sweetalert2 but rather the normal Swal (main) sweetalert2 in an Angular 9 project.
and would like to know if it's possible to achieve what this thread is about?

Basically I would like use a component in as content in the Html... something like

Swal.fire({
    title: 'RATE YOUR ORDER',
    html: `<bar-rating [max]="5" [theme]="'stars'"></bar-rating>`,
    showCloseButton: true
});

[jongbonga]

@toverux thanks ! I appreciate