Comments (9)
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!
from ngx-sweetalert2.
@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 :/
from ngx-sweetalert2.
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>
from ngx-sweetalert2.
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.
from ngx-sweetalert2.
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
from ngx-sweetalert2.
Strange! Does it happens with other targets too or just the content ?
Edit: It's okay, I can reproduce, I'll look into that!
from ngx-sweetalert2.
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>
from ngx-sweetalert2.
It worked with the workaround 👍
Thanks for the quick help on this
from ngx-sweetalert2.
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.
from ngx-sweetalert2.
Related Issues (20)
- This library is not working under IIS HOT 1
- Stricts templates & Angular Language Service HOT 1
- open multiple alerts HOT 1
- Default value for *swalPortal directive input HOT 7
- error NG8001: 'swal' is not a known element: HOT 3
- Modal when appear delete overflow-y : auto to hidden severals times HOT 1
- CommonJS or AMD dependencies can cause optimization bailouts. HOT 3
- Module not found: Error: Package path ./public-api is not exported from package HOT 1
- Generic type 'ɵɵ*Declaration' requires between x and y type arguments. HOT 8
- Add support for color property on SwalComponent
- add support for angular 15
- Cannot find module @sweetalert2/ngx-sweetalert2 or its corresponding type declarations HOT 1
- for Angular 16 HOT 4
- Compilation errors after last update - Angular 15 HOT 6
- Sweet alert over dialog primeng
- Will the library be upgraded to v17 of Angular? HOT 1
- Support for Angular 17 HOT 7
- Angular 17 - Stanalone components HOT 1
- Content shrinking when popup opens HOT 2
- Error during installation in Angular 17 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-sweetalert2.