*swalPartial does not override <swal> content

Hi there, how do I replace the content of the popup to use the angular 2 syntax ? Let’s say I have this:

    <swal #PagesPopUp
          type="question"
          showCancelButton = "true"
          (confirm)="Save()"
          confirmButtonText='Save'>
        <form *swalPartial>
        </form>
        <ng-container *swalPartial="swalTargets.title">
            Tile Replace with this ({{ title }})
        </ng-container>
        <ng-container *swalPartial="swalTargets.content">
            <h1> Shoild it replace the content? {{ content }}</h1>
        </ng-container>
    </swal>

As you see, I add *swalPartial=“swalTargets.content” to replace the content. but It doesn’t work

Also, how do I call a SwalPartialDirective from the typescript code? right now I use PagesPopUp.show() and I don’t know if this is the right way to do it

Thanks,

[toverux]

Okay, I’ve found the cause of that. You can workaround for now by setting text="this won't be displayed" on your <swal>, and you partial view will display.

I’ll come with a proper fix as soon as I have a good one (and time to code it) and ping you when I release a version. Thanks a lot for reporting!

[toverux]

Finally got a little time to look at the library again… and well, problem solved without any intervention on my side 😄 Due to recent changes in SweetAlert2 7.4.0, this is no longer an issue. SweetAlert2 changes a few things in its DOM, and now it does not interfere with ngx-sweetalert2 anymore.

However, the behaviour has changed a little. Before, the content target was targeting the DOM element for the text of the modal, and inherited its style. Now, the same target points to the content between the title and the action buttons, where the text is contained (it’s a child element of it). This means that you won’t inherit the text styles from SweetAlert2 anymore (ie. centered text, this is the only style that Swal defines for now). You’ll have to fix that in your own CSS, or you can end up with this:

It’s an unwanted “regression” and breaking change in SweetAlert2 7.4.0, but it’s better like that. content now really targets the modal content, not just the text zone.

To mimic the old behaviour again:

.swal-text {
    text-align: center;
}

<div class="swal-text" *swalPartial="swalTargets.content">
    Not-so-broken text
</div>