maximelafarie / ngx-smart-modal Goto Github PK

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Currently the modal is not shown when trying to open it on ngOnInit/ngAfterViewInit of app.component because it is not registered yet. It is only working with a setTimeout().

Expected behavior

I would expect that the modal can be opened without a setTimeout().

Reproduction of the problem

What is the motivation / use case for changing the behavior?

I would like to show a modal automatically after the login without user interaction.

Please tell us about your environment:

• Smart Modal version: 2.0.3

• Angular version: 5.2.x

• Browser: [all]

• Language: [all]

I'm submitting a feature request

[ ] bug report
[ x ] feature request
[ ] support request

Current behavior
Currently, instantiating any ngx-smart-modal register a keyup listener on the document, this causes exponential performance issues when a modal appears in a looped component.

Yes, I am aware the solution for this is to treat a modal like a singleton and ensure it is only declared once but that is not the point here.

Expected behavior
A listener should only be created when the corresponding config parameter requires it to be so.
e.g. a ngx-smart-modal where escapable is false should not register a keyup listener on the document.

Reproduction of the problem

• Two modals appear in my list of 139 items, 7 appear outside of the list:
  

• After removing both modals:
  

What is the motivation / use case for changing the behavior?
Behavior that is configured to be disabled should be completely disabled.

Please tell us about your environment:
macOS High Sierra 10.13.6

• Smart Modal version: 6.0.4

• Angular version: 5.2.11

• Browser: all

• Language: Typescript

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
I have upgrade ngx-smart-modal from v5.x to 7.x and found that position of my modals changes how it looks from v5.x which is using layout from app's position to using layout from parent's position.

My components structure design is stacked and able to call infinite.
For example
-Staff list component
      -Show staff info
      -Show department list component
-Department list component
      -Show department info
      -Show staff list component
-App root
      -Show staff list component
so it will recursive call each other on click event.
Please take a look sample, In staff list choose 1 staff it will popup department list, Choose 1 department it will popup staff list and so on.
https://plnkr.co/l5snyhlMgsIkjODTTobt

After i changed to v7.x when using modal inside modal it will show inside main modal instead of app's position.
https://plnkr.co/WQw0fC6x5mcF7WB03lV2
Also i tried to use "target" but still not working.
https://plnkr.co/Ag5nLm

Expected behavior
Please take a look on my plnk for v5.x when using modal inside modal it will show in layout of app's position.
https://plnkr.co/l5snyhlMgsIkjODTTobt

Angular 4.3.3 if you have the component change detection set to onpush the backdrop will not close

Modals (Examples with CSS frameworks) not working with Firefox on https://biig-io.github.io/ngx-smart-modal/

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Actually, to open or close a modal using the service, we need to do this way:

<button (click)="ngxSmartModalService.getModal('myModal').open()">Open</button>

<button (click)="ngxSmartModalService.getModal('myModal').close()">Close</button>

Expected behavior

Open/close a modal this way:

<button (click)="ngxSmartModalService.open('myModal')">Open</button>

<button (click)="ngxSmartModalService.close('myModal')">Close</button>

What is the motivation / use case for changing the behavior?

It could be less painful (in coding terms) to open/close a modal using the NgxSmartModalService.
In addition, it won't require the entire modal but directly call its open/close methods.

• Smart Modal version: ALL

• Angular version: ALL

• Browser: ALL

Hello,

What i am trying to do is open a modal that has been created in a componentA, in another component called componentB, in order to use the same modal in multiple Components on click events, but im getting this error:

_ERROR TypeError: Cannot read property 'modal' of undefined
    at NgxSmartModalService.getModal (ngx-smart-modal.js:64)
    at Object.eval [as handleEvent] (componentB.html:4)
    at handleEvent (core.js:13547)
    at callWithDebugContext (core.js:15056)
    at Object.debugHandleEvent [as handleEvent] (core.js:14643)
    at dispatchEvent (core.js:9962)
    at eval (core.js:10587)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)_

Am I doing something wrong? or how can I acomplish this task?

Here is the code:
ComponentA

<ngx-smart-modal #myModal identifier="myModal" [closable]="true" [escapable]="true" [dismissable]="true">
  <h1>Title</h1>
  <p>Some stuff...</p>

  <button class="btn btn-primary" (click)="myModal .close()">Close</button>
</ngx-smart-modal>

<button class="btn btn-primary" (click)="ngxSmartModalService.getModal('myModal').open()">Open myModa</button>

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { NgxSmartModalService } from 'ngx-smart-modal';


@Component({
  selector: 'app-componentA',
  templateUrl: './componentA.component.html',
  styleUrls: ['./componentA.component.css']
})
export class ComponentA implements AfterViewInit {

  constructor(public ngxSmartModalService: NgxSmartModalService) { }
  ngAfterViewInit() {
    const obj: Object = {
      prop1: 'test',
      prop2: true,
      prop3: [{ a: 'a', b: 'b' }, { c: 'c', d: 'd' }],
      prop4: 327652175423
    };

    this.ngxSmartModalService.setModalData(obj, 'myModal');
  }
}

ComponentB

<button class="btn btn-primary" (click)="ngxSmartModalService.getModal('myModal').open()">Open myModa</button>

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { NgxSmartModalService } from 'ngx-smart-modal';

@Component({
  selector: 'app-componentB',
  templateUrl: './componentB.component.html',
  styleUrls: ['./componentB.component.css']
})
export class ComponentB {
  constructor(public ngxSmartModalService: NgxSmartModalService) { }
}

How to use Multiple popups on my index.html page. here is my code can you please help on this.

module.ts

import {Component} from '@angular/core';
import { NgxSmartModalModule, NgxSmartModalService } from 'ngx-smart-modal';

import { popupModalOne } from './popup1-modal';
import { popupModalTwo } from './popup2-modal';

@NgModule({
  declarations: [
    Appcomponent, popupModalOne, popupModalTwo
  ],
  imports: [
    FormsModule,
    BrowserModule,
    NgxPaginationModule,
    BrowserAnimationsModule,
    ModalModule.forRoot(),
    NgxSmartModalModule.forRoot()
  ],
  providers: [NgxSmartModalService],
  bootstrap: [Appcomponent] 
})

app.component.html

Here is my list of records having view/edit popups displaying...

<app-root></app-root>
<one-modal></one-modal>
<two-modal></two-modal>
 
1. <button (click)="ngxSmartModalService.getModal('popupOne').open()">Open myModal 1</button>
2. <button (click)="ngxSmartModalService.getModal('popuptwo').open()">Open myModal 2</button>

app.component.ts

import {AfterViewInit, Component} from '@angular/core';
import {NgxSmartModalService} from 'ngx-smart-modal';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] 
}) 

export class AppComponent implements AfterViewInit {
  constructor(public ngxSmartModalService: NgxSmartModalService) {
  }
  ngAfterViewInit() {
    const pen: Object = {
      prop1: 'test',
      prop2: true,
      prop3: [{a: 'a', b: 'b'}, {c: 'c', d: 'd'}],
      prop4: 327652175423
    };
    this.ngxSmartModalService.setModalData(pen, 'popupOne');
   const book: Object = {
      prop1: 'test',
      prop2: true,
      prop3: [{a: 'a', b: 'b'}, {c: 'c', d: 'd'}],
      prop4: 327652175423
    };
     this.ngxSmartModalService.setModalData(book, 'popuptwo');
  }
}

page-two-component.html

@Component({
selector: 'one-modal',
templateUrl: './page-One-component.html'
})

<ngx-smart-modal #popupOne [identifier]="'popupOne'">
  <h1>Title 1</h1>
  <p>Hello</p>
  <button (click)="popupOne.close()">Close</button>
</ngx-smart-modal>

page-two-component.html

@Component({
selector: 'two-modal',
templateUrl: './page-two-component.html'
})

<ngx-smart-modal #popuptwo [identifier]="'popuptwo'">
  <h1>Title 2</h1>
  <p>Hello</p>
  <button (click)="popuptwo.close()">Close</button>
</ngx-smart-modal>

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
As mentioned by @melicerte, when closing a modal with closeLatestModal(), the modal seems to be not totally closed and remains present in the DOM

Expected behavior
Modal should totally disappear from the DOM on method call.

• Browser: All

I'm submitting a ...

[ x ] bug report 
[ ] feature request
[ ] support request 

Current behavior
I am setting up some data with setModalData method. When I try to get data by using getModalData method I always get value undefined.

Expected behavior
It should return data which was set by setModalData method

Hi @maximelafarie, below is not the actual code but sample code to show what I am trying to achieve. Basically, I want to call child component method from "ngx-smart-modal" view which is in the my-app component.
(click)="child.doSomething()"

I give child component an Identifier name "#child" and trying to call its method using "child.doSomething()". But it is not working and throwing an error something like that "Cannot read doSomething of undefined"

Maybe I am doing it in a wrong way so I want to know how to call component methods from "ngx-smart-modal" no matter where this modal is present in my-app application?

import {Component} from '@angular/core';
import {NgxSmartModalService} from 'ngx-smart-modal';

@Component({
  selector: 'my-app',
  templateUrl: '<child-cmp #child></child-cmp>
                <ngx-smart-modal #myModal1 [identifier]="'myModal1'"> 
                    <button (click)="child.doSomething()">submit</button>
                </ngx-smart-modal>'
})

export class AppComponent {
  constructor(public ngxSmartModalService: NgxSmartModalService) {
  }
}


@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Actually, if you want to do an action after modal closing/escape/dismiss, you need to subscribe the three events and do the same action three times.

Expected behavior

What is the motivation / use case for changing the behavior?

Avoid code duplication.

• Smart Modal version: ALL

• Angular version: ALL

• Browser: [all]

• Language: [all]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
visible attr is not taken into account
Expected behavior
visible attr should be taken into account

Reproduction of the problem
Add [visible]="true" and see if it shows up

What is the motivation / use case for changing the behavior?
I dont know

Please tell us about your environment:
not important

• Smart Modal version: 0.8.x
  latest

• Angular version: 2.0.x
  ang 5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

I am using 'ngx-smart-modal' version of 3.1.0 in my angular5 app with the help of this link .When I given the default parameters mentioned in the official tutorial it's not working.

`<ngx-smart-modal #myModal identifier="myModal" dismissable="false">

hello

in the above code I trying to give the dismissable parameter as false for preventing the closing of modal when clicking on backdrop,but it's not working.How can I pass these parameters in ngx-smart-modal ?

Given that we impose the way modals are appearing (only one animation with @angular/animations), it could be nice to remove them and include .scss and .css dedicated styles.

Then, programmers could import it to their project or not if they want to make the lib styles theirselves.

A dedicated UI/UX developer will be assigned to this issue.

version:6.0

how to modify dialog width?
i set

.nsm-dialog {
&.nsm-dialog-open
{ width: 75% ;
}
}


in sub-Component's scss file

but its not useful

i only could set it in source file "ngx-smart-modal/ngx-smart-modal.scss"
@import "~ngx-smart-modal/ngx-smart-modal";
it's useful

but it will be Global style,i need part style

sorry my English is not good

thx for this goods

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I'm using a left sidebar menu in my angular app. The ngx-smart-modal component is instantiated in my main content area which is on the right side of the screen because the sidebar is on the left side. The problem is when I open the modal, it center itself relative to the main content screen which I completely understand why.

Expected behavior

I would love a feature where I can assign where the modal is relative to (e.g "body") so it can center itself according to my needs.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Smart Modal version: 6.0.0

• Angular version: 5.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ X ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Ngx-smart-modal is on Angular 5 at the moment and may be incompatible with Angular 6 apps.

Expected behavior
Update the library to support Angular 6

Reproduction of the problem
I don't have any problems at this moment.

What is the motivation / use case for changing the behavior?
With the new update of Angular, they have introduced new RxJS features and some minor features that boosts the performance of your app.

Please tell us about your environment:

• Angular version: 5.1.x

• Browser: All

• Language: TypeScript 2.7

If the content of the modal is big and its height is greater than the height of the screen / browser, the modal extends the main height, event if the body's height is limited and/or defined e.g.:

body { height: 100%; }

At the beginning the modal has a normal behavior:

But at scroll time, the whole page is scrolling, not only the modal (and this is what we want !):

Actually, it's written Released under the ISC license. on your demo page.
But the project is under MIT license 😉

Completes the escapeAble option you can pass to a modal (defaults to true).
Need to link an event to it.

Expected Behavior

Custom attribute directive to work as intended

Current Behavior

Directive not working in any way, Not being triggered either.

Steps to Reproduce

1. Create a custom directive (E.g.: Change background color on input)
2. Put inside <ngx-smart-modal><ngx-smart-modal/>
3. Open Modal

Code example

component.template.html

<ngx-smart-modal #userFormModal [identifier]="'user-form-modal'" [backdrop]="false"
                  [customClass]="'form-modal'"
                  [closable]="false">
  <input type="text" appHighlight />
</ngx-smart-modal>

Opening modal with

constructor(public modalService: NgxSmartModalService){}

openModal(): void {
  this.modalService.getModal('user-form-modal').open();
}

highlight.directive.ts

import { AfterViewInit, Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective implements {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

Codecov is actually at 50%. It needs to be improved (unit and functional tests may not be sufficient).

Modal animations disappear in Safari and alignments seems buggy.

[ x ] bug report 
[ ] feature request
[ ] support request

Current behavior
When you set data to your modal and call hasData at the next line you'll get a false.
It isn't a really common case but may lead to confusion.

Expected behavior

When some data is set on the modal the function hasData should return true

Reproduction of the problem

const modal = modalService.getModal('myModal');
modal.hasData() // return false, it's ok
modal.setData('foo') 
modal.hasData() // Return false, wuutttt
setTimeout(() => console.log(modal.hasData()), 0); // Print yes

• Browser: [all ]

I'm submitting a ... (check one with "x")

[ ] bug report 
[ ] feature request
[x ] support request

Hi and thank you for your useful component,
My problem is that I need to set the modal width to say 90% but it seems that the styles are not applied to the element. In fact if I set this style directly on the element (inspecting it in Chrome), it works, but not when I just use the styles in the code.

  <ngx-smart-modal #createModal [identifier]="'createModal'" [customClass]="'wide-modal'">
    <app-create-role *ngIf="showCreate" (done)="createDone()"></app-create-role>
  </ngx-smart-modal>

style:

.wide-modal {
  min-width: 900px;
  background-color: blue; // Just to confirm that no style is being applied, irrespective of the parent, etc.
  
}

Hi, I'm using ngx-smart-modal in an Angular 6/RxJs application to display a confirm dialog. The problem is that it seems you can create just one button, the 'close' button, that triggers myModal.close().
So, I thought I could add two buttons to allow the user to confirm or cancel the modal.
CANCEL BUTTON:

<button (click)="confirmModal.dismiss()" type="button">{{confirmModal.getData().cancelBtnLabel}}</button>

CONFIRM BUTTON:

<button (click)="confirmModal.close(true)" type="button">{{confirmModal.getData().confirmBtnLabel}}</button>

And then the component where there is the button to open the modal:

openConfirmModal() {    
    const confirmModalData: Object = {
       ...
      };
      this.ngxSmartModalService.setModalData(confirmModalData, 'confirmModal');
      let confirmModalRef = this.ngxSmartModalService.getModal('confirmModal');
      confirmModalRef.onDismiss.subscribe(() => {
        ....
      });
      confirmModalRef.onClose.subscribe((test: boolean) => {
        .....
      });
      confirmModalRef.open();
}

But if I click on cancel button, I have the following error in the console:

ERROR TypeError: Cannot read property 'target' of undefined
    at NgxSmartModalComponent.push../node_modules/ngx-smart-modal/esm5/ngx-smart-modal.js.NgxSmartModalComponent.dismiss

I'm submitting a ...

[ ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Currently, you provide some custom classes to open modal with some animation. But when we close modal with some outer click or ESC key, it doesn't reverse the effect by which it was opened.
For example, if modal is opened from left to right, at the time of closing it should be animated from left to right movement.

What is the motivation / use case for changing the behavior?
It provides better user experience with consistency of opening and closing modal.

Hello i using you very good component but have a question when run de command npm start i get this error

ERROR in Error: Metadata version mismatch for module C:/wamp64/www/FMA/app/node_modules/ngx-smart-modal/ngx-smart-modal.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/wamp64/www/FMA/app/src/app/app.module.ts, resolving symbol AppModule in C:/wamp64/www/FMA/app/src/app/app.module.ts, resolving symbol AppModule in C:/wamp64/www/FMA/app/src/app/app.module.ts
    at Error (native)
    at syntaxError (C:\wamp64\www\FMA\app\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
    at simplifyInContext (C:\wamp64\www\FMA\app\node_modules\@angular\compiler\bundles\compiler.umd.js:25118:23)
    at StaticReflector.simplify (C:\wamp64\www\FMA\app\node_modules\@angular\compiler\bundles\compiler.umd.js:25130:13)
    at StaticReflector.annotations (C:\wamp64\www\FMA\app\node_modules\@angular\compiler\bundles\compiler.umd.js:24558:41)
    at _getNgModuleMetadata (C:\wamp64\www\FMA\app\node_modules\@angular\compiler-cli\src\ngtools_impl.js:138:31)
    at _extractLazyRoutesFromStaticModule (C:\wamp64\www\FMA\app\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26)
    at Object.listLazyRoutesOfModule (C:\wamp64\www\FMA\app\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\wamp64\www\FMA\app\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (C:\wamp64\www\FMA\app\node_modules\@ngtools\webpack\src\plugin.js:207:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (C:\wamp64\www\FMA\app\node_modules\@ngtools\webpack\src\plugin.js:443:24)
    at process._tickCallback (internal/process/next_tick.js:109:7)

But if i remove the dependeci injeccion of your module before npm start, this complile ok, if i put the dependencies of your module after to compile (npm start) all is ok. I have no idea what happend

This is my package.json

  "name": "fma",
  "version": "3.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts3-angular": "^1.5.0",
    "@angular/animations": "^4.4.4",
    "@angular/cdk": "^2.0.0-beta.11",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.11",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angular-datatables": "^4.4.0",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "ngx-smart-modal": "^5.0.0",
    "ngx-toastr": "^6.4.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.3",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/datatables.net": "^1.10.6",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.13",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Best regards

[ ] bug report => search github for a similar issue or PR before submitting
[ X] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Currently if you click the backdrop the modal closes.

Expected behavior
If [dismissable] is false clicking the backdrop doesnt close the modal.

Reproduction of the problem
<ngx-smart-modal #myModal [identifier]="'myModal'" [dismissable]="false" [closable]="false" [escapeAble]="false">

What is the motivation / use case for changing the behavior?
I currently have an upload with file selector on a modal. If i click and select the file from the file selector it closes but if I do an additional click accidentally and it lands on the backdrop it will close the modal.

Having a dismissable false will stop the backdrop from being used as a close

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I want to pass on setModalData() the index of my current element. In case, that is equal to 0 (first element of my array), hasData() return false and didn't show up the *ngIf content.

Expected behavior

hasData() make difference between no content and content equal to 0.

What is the motivation / use case for changing the behavior?

Personnal project.

Please tell us about your environment:

• Smart Modal version:

"ngx-smart-modal": "^5.0.0"

• Angular version:

"@angular/core": "^5.2.9"

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
https://github.com/biig-io/ngx-smart-modal/issues/new
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
My current table is quite long and when I want to display modal, I have to set $dialog-position-top: 70%; which is weird since 70% is fine.

But then, when my table list is small, I can't see it anymore unless I reset the top position to much less value.

Expected behavior
I was hoping the top position simply calculates from the actual screen, regardless of page content. So 50% would place it at center, 0% at the top etc, 20px. Regardless, I thought it calculates from the screen, instead of the content which I have no control over at all.

In fact, adding position:fixed to the core scss file does the trick.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

It would be nice and easier to either have percentage or pixel or even pre-defined settings like 'center' would mean center of the screen regardless of the content on display

Please tell us about your environment:

Windows 7. Webpack. NPM. Apache

• Smart Modal version: 0.8.x

• Angular version: 2.0.x

5

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome and Firefox

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  ES6

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
The current open() method does not return any Promise<> which is awaitable.

Expected behavior
Promise which can be awaited (resolved via classical way) after the modal has been closed/dismissed. Right now there is now way for prompting the user for something and continue afterwards.

What is the motivation / use case for changing the behavior?
I want to wait for the users input within a wizard flow.

• Smart Modal version: 6.0.0

Improve README examples, wording and fix links (e.g.: changelog)

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

When performing an AOT build, I get the following error.

ERROR in (1,1): : Directive NgxSmartModalComponent, Property 'escapeKeyboardEvent' is private and only accessible within class 'NgxSmartModalComponent'.
ClientApp\app\public\productdetails\productdetails.component.html(56,1): : Directive NgxSmartModalComponent, Property 'escapeKeyboardEvent' is private and only accessible within class 'NgxSmartModalComponent'.

Expected behavior

I was expecting to be able to do AOT build.

Reproduction of the problem

Content of component HTML template

<!-- ... -->
<ngx-smart-modal #classicModal identifier="classicModal">
  <h1>Hey, I'm a simple modal!</h1>
  <img class="modal-image" src="http://lorempicsum.com/futurama/627/200/3" alt="Lorem picsum">
  <p>{{ "sampleText[0]" }}</p>
  <button class="button -dark" (click)="classicModal.close()">Close</button>
</ngx-smart-modal>

Content of app module

  // ...
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgxSmartModalModule.forRoot(),
    // ....
  ]
  // ...

Please tell us about your environment:

• Windows 10 Enterprise

• Smart Modal version: 6.0.2

• Angular version: 5.2.10

• Browser: N/A

• Language: TypeScript 2.5.3

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Clicking the X close button top right when [closeable]="true" causes the form on the parent page to submit. If this is implemented as a button then it needs type="button" as the default type is a submit button.

Expected behavior
The dialog should just close without submitting the parent form.

Reproduction of the problem
Invoke the dialog from a page with a form that is active. Click the X button. The parent form submits.

What is the motivation / use case for changing the behavior?
Unintended side effects,

Please tell us about your environment:
Angular 5 cli

• Smart Modal version:
  6.0.0

• Angular version:
  5.2.0

• Browser:
  Chrome Version 66.0.3359.139 (Official Build) (64-bit)
  Firefox 59.0.2 64 Bit

• Language:
  Typescript

Unable to close the modal on 'escape'.

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

The installation instruction on NPM under the header appears to be out of date. The line for importing the SCSS is: @import "ngx-smart-modal/ngx-smart-modal";. For me this did not work and the line appears to be missing a tilde.

Expected behavior

When looking at the documentation on Github that line on how to importing SCSS is @import "~ngx-smart-modal/ngx-smart-modal";. Here a tilde appears in the path, and this import path works for me.

Suggested solution

Update the NPM page https://www.npmjs.com/package/ngx-smart-modal to have the correct import path for scss.

I'm submitting a ...

[ ] bug report
[ x ] feature request
[ ] support request

There is a method to get a higher z-index value. But there is not any method to set this higher z-index value to some modal.
What I mean is, let's assume I opened a modal named A. This modal has a button to open another modal named B. I know if I put modal selectors properly in HTML B can be opened over A.
But if I have some other requirements, I should be able to assign a higher z-index value to modal, provided one has modal-ID.

My conclusion, there should be a method something like setHigherIndex(modal-id).

Thanks.

Thanks for sharing code.
In my code component.ts page i have to call 2 model popups in a single page.
I getting error when i hit button I am getting error in console saying "BodyComponent.html:49 ERROR TypeError: Cannot read property 'modal' of undefined"
here is my code:

1. <button (click)="ngxSmartModalService.getModal('myModal1').open()">Open myModal1</button>
2. <button (click)="ngxSmartModalService.getModal('myModal2').open()">Open myModal2</button>

html:

<ngx-smart-modal #myModal1 [identifier]="'myModal1'"> 
  <button (click)="myModal.close()">Close</button>
</ngx-smart-modal>

<ngx-smart-modal #myModal2 [identifier]="'myModal2'"> 
<button (click)="myModal.close()">Close</button>
</ngx-smart-modal>

In component:

ngAfterViewInit() {
    const obj: Object = {
      prop1: 'test',
      prop2: true,
      prop3: [{a: 'a', b: 'b'}, {c: 'c', d: 'd'}],
      prop4: 327652175423
    }; 
    this.ngxSmartModalService.setModalData(obj, 'myModal1');

const obj_one: Object = {
      prop1: 'test2',
      prop2:  'data' 
    }; 
    this.ngxSmartModalService.setModalData(obj_one, 'myModal2');
  }

Would be nice to be able to override or at least disable the angular animation currently on the modal. The current animation isn't really working out for full-screen modals.

If I import the NgxSmartModal in my shared module i will get an error saying "BrowserModule has already been loaded. If you need access to common..."

To make it work I have to remove the BrowserModule and BrowserAnimationModule from the NgxSmartModal decorators in ngx-smart-modal.js

NgxSmartModalModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxSmartModalComponent],
exports: [NgxSmartModalComponent],
imports: [CommonModule]
},] },
];

npm version is wrong and version is 6.0.3 and does not work at all

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
In angular6, component just opens on to the page, instead of in a modal pop-up No console errors. Close and other features all work fine.
Expected behavior

Expected to open

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Smart Modal version: 0.8.x

• Angular version: 2.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

I'm submitting a ...

[ ] bug report 
[ ] feature request
[ x ] support request

In my Angular-6 application, there are many lazy-loaded modules. These modules have their own modals. As you mentioned in the documentation, I have to do NgxSmartModalModule.forChild() in my child modules. I mentioned NgxSmartModalService in providers array of my AppModule. But I want a singleton instance of NgxSmartModalService for my entire app. Is it possible to do that? If yes, Can you please suggest me how to do that?

I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

I'll set my modal data dynamically on a click event, but data doesn't change when I'll click on an another button and keep the first data.

Expected behavior

All of my modal open with the right data.

Reproduction of the problem

You can test my behavior here : https://plnkr.co/Ov124mJajTkWxmrl8hrZ?p=preview

What is the motivation / use case for changing the behavior?

I've got dynamic data and I need to set dynamic modal data.

Please tell us about your environment:

No need for this issue.

• Smart Modal version: 2.0.x

• Angular version: 5.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
I've got the NPM Warning with web-animation-js, I add it. But it keep an error on modal opening.

NgxSmartModalComponent.html:64 ERROR Error: Found the synthetic property @dialog. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Expected behavior
Integrate BrowserAnimationModule on NgxSmartModalComponent directly.

Reproduction of the problem
Install module and try.

• NgxSmartModal version: 3.0.0

• Angular version: 4.4.6

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]