ngx-smart-modal - Angular 6

user_6702400 0
Viewed 5387

I followed this StackBlitz example to add te ngx-smart-modal window.

Everything went well, except the component opens on the page instead of in a Lightbox modal pop-up.

This example is using Angular 4.

Has anybody used this module in Angular 6 successfully?

angular6 modal-dialog
4 Answers

For ngx-smart-modal v7.1.0, I simply added the .css or .scss (.scss in my case since that is the default file extension I have setup in my Angular project) file to the styles section of your angular.json.

"styles": [
  ...
  "node_modules/ngx-smart-modal/ngx-smart-modal.scss",
  ...
]
user_24874140

Add ngxSmartModal's style in your global style.css (or .scss) as :

@import "~ngx-smart-modal/ngx-smart-modal";
user_59520590

Try to install the lower version of 'ngx-smart-modal'. e.g npm install ngx-smart-modal@2.0.4

user_104130400

Change the ngx-smart-modal dependency version in package.json file like this.

"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"ngx-smart-modal": "2.0.4",
"rxjs": "~6.2.0",
"web-animations-js": "2.3.1",
"zone.js": "~0.8.26"  }

Then reinstall the npm modules by using command "npm install"

user_72527750
Related