shemesh / angular-popout-window Goto Github PK
View Code? Open in Web Editor NEWAngular Popout Child Window
License: MIT License
Angular Popout Child Window
License: MIT License
When I try to install on angular 14.2.12 project --force is required.
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! @angular/core@"14.2.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^10.0.0" from [email protected]
npm ERR! node_modules/angular-popout-window
npm ERR! angular-popout-window@"^4.0.0" from the root project
Hi,
I want to catch close event when pressing X icon on pop-out window, is it possible?
Doing the line:
import { PopoutWindowModule } from 'angular-popout-window';
kicks an error saying popout-window.component.ts:28:18 - error Generic type 'Component Declaration' requires 7 type argument(s).
I'm following along with your usage here: https://www.npmjs.com/package/angular-popout-window?activeTab=readme
And I don't see this declaration being talked about here. Just says import and add to the to the @NgModule. Is there something that I am doing wrong here, or is there an issue with the package?
Any help would be greatly appreciated. Thanks
Hello,
I have followed a dozen different guides on how to use Angular Portals to take information from my main page and display it in a pop up tab or new window. There have been different ways of accomplishing this with CDK portals taking html and pushing it to new tab, or creating the component dynamically and displaying it on a new tab. While many of the solutions push dynamic data to a new tab or window successfully, they all suffered from the same issue displaying anything with dynamic bindings, such as a menu, where the drop down will appear on the main/parent window, and not on the pop up.
I've altered a simple example below showing how a mat-menu's on click event will trigger the display on the parent/host tab. This same issue affects the angular-popout-window module. Please see this issue below:
https://stackblitz.com/edit/angular-portal-issue-parent-receiving-events
As to my use case and why I need this:
My project requirement dictates a user will select from a list of items in the main page, and upon clicking, a new tab/page opens that allows them to alter and edit the object in a complex component. Without closing the new tab, the user should be able to return to the main app's window and select more items from the list and have multiple tabs/webpages open so they can edit many of these items at once. Data changes will flow back to the parent page and may update the other open tabs.
I have already created this complex component and it works if I re-bootstrap the app in the new tab every time, then url route to the component, and display the component natively without portals. The issue, however, is it causes a long delay on the bootstrap process and re-logging in the user (which takes about ~5-10 seconds), and causes issues with web sessions on our server. I want to avoid all those issues using portals or dynamically pushing the component with this angular-popout-window module. I believe if I can receive help with the simple issue displayed here, the same fix might solve all my other binding issues in our complex component.
Thank you.
Hi,
dock and undock works fine for me, It is unable to load my assets/images in child window.
In the child window the styles related tailwindcss are not loading in iMac Safari
Is there any way with which we can load JS files to the child window just like CSS?
After migrating to the version 2.0.0, the popout window displays no content.
The browsers tested are:
Version 1.3.0 was working fine with same set ups.
Not only on my app that this behavior is present, but also the online demo is showing the same behavior as well.
FontFaceSet's that come from an @font-face rule
cant be added to the Popout Windows FontFaceSet thus leaving the page blank and bailing out of the execution process (? unconfirmed)
Open the Demo with Firefox 112.0 and try to pop-out the window, it stays blank and doesnt show anything. The bug described above is observed in the same frame where the main Application resides when the popout-window has opened.
It should show the component that is inside the popout-window
tag.
This Problem only is observed on Firefox and should be resolved as fast as possible imho.
Lines that cause this error:
https://github.com/Shemesh/angular-popout-window/blob/master/projects/popout-window/src/lib/popout-window.component.ts#L102-L104
One way would be to create an opt-out on copying fonts from the main document to the popout document.
This could be done through creating a .forRoot(...)
function with the said opt-out in the module, or to check if the currently iterated Font Face is a @font-face
rule. The latter i already checked and i havent found any properties which could provide this information to check against. So we would be stuck with the first Option to create an opt-out.
I think wrapping the lines mentioned above in a try/catch block (and showing a warning on failure) would be enough to fix this current behaviour.
Yes
This happens only on Firefox, Chrome seems to have no problem with that behaviour whatsoever.
I also found the exact problem for this on w3c issues page: w3c/csswg-drafts#5707
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.