*swalPartial does not override <swal> content

[ffJPabloFlores]

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]

Yes SwalContent.show() should be used, you have nothing more to do.
But you have two *swalPartials here that target the content. The first one, <form *swalPartial> </form> also targets the content, because the content is the default target. Remove one of those two directives.

[ffJPabloFlores]

HI, thanks for the quick reply 👍
I just deleted one of the *swalPartials
And the code looks like this now:

    <swal #PagesPopUp
          type="question"
          showCancelButton = "true"
          (confirm)="Save()"
          confirmButtonText='Save'>
        <ng-container *swalPartial="swalTargets.title">
            Title replace with this ({{ title }})
        </ng-container>
        <ng-container *swalPartial="swalTargets.content">
            <h1> Content  replace with this {{ content }}</h1>
        </ng-container>
    </swal>

TS code:
@ViewChild('PagesPopUp') private PagesPopUp: SwalComponent; public title = 'My little Title'; public content = 'My little Content'; public constructor(public readonly swalTargets: SwalPartialTargets) { }
and later in one function I call this.PagesPopUp.show()
but still cant replace the content. it show this:

I'm using this versions:

"@toverux/ngx-sweetalert2: "^3.0.1",
"sweetalert2": "^7.0.0",

I'm using Angular 4, I don't know if this could affect for some reason
Please advice thanks

[toverux]

Strange! Does it happens with other targets too or just the content ?

Edit: It's okay, I can reproduce, I'll look into that!

[ffJPabloFlores]

Yes It only happen with the target content, I test title, confirmButton, cancelButton, buttonsWrapper and I was able to replace the values example:

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

[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!

[ffJPabloFlores]

It worked with the workaround 👍

Thanks for the quick help on this

[tifcohen]

Well, I didn't understand @toverux 's workaround, so I found another one :)
The scc style of the content is set to "display: none" and that's why we can't see anything.
Just override it and everything will be ok :)
On the button's action (the button which opens the swal) I just added:
this.swalTargets.content().style.cssText = "";
And this was it.
Works for me with Angular5.
I hope this helps.

[toverux]

@tifcohen The thing is that SweetAlert sets the display of the content to none if no content is defined in the SweetAlert2 parameters. That's why setting the text input works : SweetAlert2 displays the content block, but it is immediately overriden by ngx-sweetalert2, that's why you wouldn't see the workaround's placeholder text.
By "didn't understand", do you mean that it didn't work in your case? It really should 😄

Your solution is quite fine and fixes the same problem indeed, but may erase other useful SweetAlert2 inline styles (if any other than display is set, which is probably not the case, but just in case). Something like .style.display = 'block'; would be safer.

Also everyone, sorry for not having fixed this bug yet, I really don't have much free time for now :/

[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>