1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Error using modal in MDB Angular

bjorg@promineo.no pro asked 7 years ago

I'm trying to use the fluid modal in my project but get following error: There is no directive with "exportAs" set to "mdb-modal" The source is taken directly from your example: 
<button type="button" class="btn btn-primary waves-light" data-toggle="modal" data-target="#basicExample" (click)="fluid.show()" mdbRippleRadius>
    Right
</button>
<div mdbModal #fluid="mdb-modal" class="modal fade right" id="fullHeightModalRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <divclass="modal-dialog modal-full-height modal-right"role="document"> <divclass="modal-content"> <divclass="modal-header"> <h4class="modal-title w-100"id="myModalLabel">Modal title</h4> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close" (click)="fluid.hide()"> <spanaria-hidden="true">×</span> </button> </div> <divclass="modal-body"> </div> </div> </div> </div>

Dawid Adach pro commented 7 years ago

Dear Bjorg, I cannot reproduce the issue, could you please share your project with us ?

DanielNetzer free answered 6 years ago

I'm getting the same error, the code I used is copy pasted from the doc's. the basic example.

Dawid Adach pro commented 6 years ago

Could you please mail us your project including package.json so we could verify what are the version of environment you use?

DanielNetzer free commented 6 years ago

I cant send the entire project, but I can add here my package.json.

DanielNetzer free commented 6 years ago

{ "name": "cupo.io", "version": "0.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": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.8", "@ngrx/effects": "4.1.1", "@ngrx/entity": "4.1.1", "@ngrx/router-store": "4.1.1", "@ngrx/store": "4.1.1", "@ngrx/store-devtools": "4.1.1", "angular2-uuid": "1.1.1", "chart.js": "^2.5.0", "core-js": "^2.4.1", "crypto-js": "^3.1.9-1", "easy-pie-chart": "^2.1.7", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "ng-mdb-pro": "git+https://oauth2:7Eov9smPQo5CZG3txKvo@git.mdbootstrap.com/mdb/angular/ng-pro.git", "ng2-device-detector": "^1.0.0", "ngrx-store-freeze": "^0.2.0", "ngrx-store-localstorage": "^0.3.0", "rxjs": "^5.5.2", "screenfull": "^3.3.0", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.6.0", "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^5.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.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.7.0", "typescript": "~2.4.2" } }

DanielNetzer free commented 6 years ago

I managed to fix it though, I had to import the Module into other sub modules in order for it to work. e.g. import { MDBBootstrapModules } from 'ng-mdb-pro'; // Components import { FormButtonComponent } from './components/dynamic-button/dynamic-button.component'; import { FormInputComponent } from './components/dynamic-input/dynamic-input.component'; import { FormSelectComponent } from './components/dynamic-select/dynamic-select.component'; import { FormCheckboxComponent } from './components/dynamic-checkbox/dynamic-checkbox.component'; import { FormRadioComponent } from './components/dynamic-radio/dynamic-radio.component'; import { DynamicFieldDirective } from './components/dynamic-field/dynamic-field.component'; @NgModule({ imports: [ CommonModule, ReactiveFormsModule, FormsModule, MDBBootstrapModules ],
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
bjorg@promineo.no
Pro User 0Support score
1Questions 0Answers 0Snippets