mazdik / ng-modal Goto Github PK

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

i tried to close the popup from ts it's not allowing me to do so

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

Hi, is this library available as npm package ?

ERROR in ./node_modules/ngb-modal-draggable/index.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: C:\project\node_modules\ngb-modal-draggable\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Form at (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (C:\project\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:838:23) at plugin.done.then (C:\project\node_modules@ngtools\webpack\src\loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7)

=================

Angular CLI: 8.0.2 Node: 10.16.0 OS: win32 x64 Angular: 8.0.0 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Package Version ----------------------------------------------------------- @angular-devkit/architect 0.800.6 @angular-devkit/build-angular 0.800.6 @angular-devkit/build-optimizer 0.800.6 @angular-devkit/build-webpack 0.800.6 @angular-devkit/core 8.0.6 @angular-devkit/schematics 8.0.2 @angular/cdk 8.2.1 @angular/cli 8.0.2 @ngtools/webpack 8.0.6 @schematics/angular 8.0.2 @schematics/update 0.800.2 rxjs 6.5.2 typescript 3.4.5 webpack 4.30.0

Hello Dear I cant make the css working in angular cli 9.2.1

the header is still primary blue

atempt 2 with nested modal:

I have tried now in almost a week to solve this but I cant.

Notice my style.scss is clean as well.

如题，动态创建并传入component，有计划支持吗？

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.

I need to change the close and maximize icons, how can this be done?

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"
},

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;

How to prevent the dialog get out of the window when resizing (print screen attached)? The issue was fixed for dragging, but not also for resizing. I couldn't fix it.
It will help a lot.

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.

device: Android 6.0 tablet
browser: Chrome 68

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&nbsp;</p><p>&nbsp;</p><p>asdjaisdjosidjasodjojojjjo</p><p>&nbsp;</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:

below is css:

I have tried to fork your project also just implement fetch data service to display sanitized html,
its the same behavior.

An unhandled exception occurred: No valid exports main found for 'E:\Draggable-maodal\ng-modal-master\node_modules\terser'

How to use it with ionic 4 ?

Hi, thanks for your amazing component

It would be nice to have the following events:

• Resize End
• Maximize

This events are useful when you need to manually resize the inner components of the modal

not able to drag and resize in mobile.

I have imported "ng-mazdik-lib" module

I tried to use your example css template but, the ng-modal doesnt change size at all.

please help me out.