mazdik / ng-modal Goto Github PK
View Code? Open in Web Editor NEWAngular resizable and draggable modal component
Home Page: https://mazdik.github.io/ng-modal/
Angular resizable and draggable modal component
Home Page: https://mazdik.github.io/ng-modal/
I tried to use your example css template but, the ng-modal doesnt change size at all.
please help me out.
=================
Hi, is this library available as npm package ?
I need to change the close and maximize icons, how can this be done?
Hello,
I installed the package npm i ng-modal-lib --save
but I don't understand how to use the modal ?
in the exemple html code, there is code like
(closeModal)="onCloseModal()">
(click)="modalRoot.hide()"
[...]
How do you define the methods it in the xxx.component.ts file ?
I don't find any infos on the repository and I don't understand how the snippet could work without definition.
Thank you
Regards
Hello, my name is Alejandro and i have a question, it is possible make the modal open by default?
Let me explain, i want open the modal when the application start, like a welcome message or something similar.
Thanks,
Alejandro Corral
I imported the module, but it is failing when I try to load the component
import { ModalComponent } from 'ng-modal-lib';
I am trying to import to be able to call "childModal.show" when an event happens.
@ViewChild('childModal', { static: false }) modal: ModalComponent;
Firstly, I like your component:).
As the title said, I have checked your codes, and found that in the ng-modal component, you use addEventListener
way, not Angular @HostListener
style to bind handler, so do you want to have a update about that?
And I have forked your repo into my local computer, changed it into Angular style, but found that if you drag the modal move it so fast, the performance is not as good as yours, can you explain that for me?
thank you very much.
Hi, thanks for your amazing component
It would be nice to have the following events:
This events are useful when you need to manually resize the inner components of the modal
Is there a way to prevent the modal from being dragged off the top of the screen? I can see that the top value is going negative, can you set a top bounds? Otherwise, my users lose the title bar to drag it back down.
Thanks, great utility, I appreciate it.
How to use it with ionic 4 ?
Hi,
I try to use your modal lib and I'am doing something wrong....
I have created a simple component with your html and css from the readme.md .
In this component i use this to get the modal and show it:
@ViewChild(ModalComponent) modal: ModalComponent;
show(): void {
this.modal.show();
}
In the app component's html i have inserted:
<app-mysimple></app-mysimple>
<button (click)="openDialog()">Knoten</button>
and in the ts
@ViewChild(MySimpleComponent) simple: MySimpleComponent;
openDialog() {
this.simple.show();
}
The Button opens the modal dialog and everything is fine:
When I maximize the modal the maximize/normalize button does not change:
When I normalize again the buttons start moving:
After 3 times maximize/normalize:
Do you have any hints what I am doing wrong?
Best regrads
Sebastian
PS: Using Angular
"dependencies": {
"@angular/animations": "~9.0.6",
"@angular/cdk": "^9.1.3",
"@angular/common": "~9.0.6",
"@angular/compiler": "~9.0.6",
"@angular/core": "~9.0.6",
"@angular/forms": "~9.0.6",
"@angular/material": "^9.1.3",
"@angular/platform-browser": "~9.0.6",
"@angular/platform-browser-dynamic": "~9.0.6",
"@angular/router": "~9.0.6",
"ng-modal-lib": "0.0.4",
"ol": "^6.2.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
如题,动态创建并传入component,有计划支持吗?
i tried to close the popup from ts it's not allowing me to do so
device: Android 6.0 tablet
browser: Chrome 68
not able to drag and resize in mobile.
I have imported "ng-mazdik-lib" module
An unhandled exception occurred: No valid exports main found for 'E:\Draggable-maodal\ng-modal-master\node_modules\terser'
Hi Dear Mazdik,
I have created data through ckeditor2 content in through firebase.
there is no div style tags in the saved html.
unfortunately somehow the modal is displaying transparaceny for the content:
this is the code for the content:
<p>this is some html blablablabla </p><p> </p><p>asdjaisdjosidjasodjojojjjo</p><p> </p><ul> <li>ajsidiajsdaosjid</li> <li>asdasdjaoidsj</li> <li>asjdaosdj</li> <li>ajsidiasjdooji</li></ul><p><img alt="" src="https://image.shutterstock.com/image-photo/dangerous-hooded-hacker-breaks-into-260nw-680075002.jpg" style="height:280px; width:463px" /></p>
this is the html for the modal:
I have tried to fork your project also just implement fetch data service to display sanitized html,
its the same behavior.
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.