Topic: How to use MDB in child modules? including lazy loading)
alvipeo pro asked 7 years ago
> There is no directive with "exportAs" set to "mdb-modal" (" mdbRippleRadius>Login / Register form</button> ...So what and how should I import into child modules in order to MDB Angular work?
alvipeo pro answered 7 years ago
Damian, I'm trying not to create a shared component. I usually have multiple modules in my angular apps so CLI would create chunks and I can leverage lazy loading.
For example, in my app.module routing:
Start your code here const routes: Routes = [ { path: "", component: TheHomepage, pathMatch: "full", data: {} }, { path: "user", loadChildren: "./users/users.module#MyUsersModule" }, { path: "bloggers", loadChildren: "./bloggers/bloggers.module#MyBloggersModule" } ];
Now, in Users module I need to import your MDB module to be able to use components. Think of it as those modules are reusable and independent (and loaded lazily). App module knows nothing about other modules and those modules know nothing about App module. ok, tell me how to fix this 'Can't bind to 'buttonClass' since it isn't a known property of 'mdb-tabset'.'. Maybe I can do it myself.
Damian Gemza staff commented 7 years ago
Alvipeo could you share me your's project at d.gemza@mdbootstrap.com ?alvipeo pro commented 7 years ago
Sent.Damian Gemza staff commented 7 years ago
Haven't got mail from you.alvipeo pro commented 7 years ago
It's sent. I just checked. Topic is 'Lazy loading and independent modules'. Look at the spam folder.Damian Gemza staff answered 7 years ago
Alvipeo,
If you have your's sharedModule, and in this sharedModule exists something like sharedComponent, you have to export this sharedComponent in exports array in your's sharedModule. For me it's working well. You can read more about this here: https://stackoverflow.com/questions/39601784/angular-2-use-component-from-another-module.
So mine app.module.ts looks like this:
import { SharedModule } from './shared/shared.module'; import { BrowserModule } from '@angular/platform-browser'; import { MDBBootstrapModules } from 'ng-mdb-pro'; import { ToastModule } from './../../node_modules/ng-mdb-pro/pro/alerts/toast/toast.module'; import { MDBSpinningPreloader } from 'ng-mdb-pro'; import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import { SharedComponent } from './shared/shared.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MDBBootstrapModules.forRoot(), ToastModule.forRoot(), FormsModule, SharedModule ], providers: [MDBSpinningPreloader], bootstrap: [AppComponent], schemas: [ NO_ERRORS_SCHEMA ] }) export class AppModule { }
My shared.module.ts looks like this:
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SharedComponent } from './shared.component'; import { MDBBootstrapModules } from 'ng-mdb-pro'; import { MDBSpinningPreloader } from 'ng-mdb-pro'; @NgModule({ imports: [ CommonModule, MDBBootstrapModules.forRoot(), ], providers: [ MDBSpinningPreloader, ], declarations: [SharedComponent], exports: [SharedComponent], }) export class SharedModule { }
And my shared.component.html looks like this:
<button type="button" class="btn btn-primary relative waves-light" (click)="basicModal.show()" mdbRippleRadius>Launch demo modal</button> <div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}"> <divclass="modal-dialog"role="document"> <divclass="modal-content"> <divclass="modal-header"> <buttontype="button"class="close pull-right"aria-label="Close" (click)="basicModal.hide()"> <spanaria-hidden="true">×</span> </button> <h4class="modal-title w-100"id="myModalLabel">Modal title</h4> </div> <divclass="modal-body"> ... </div> <divclass="modal-footer"> <buttontype="button"class="btn btn-secondary waves-light"aria-label="Close" (click)="basicModal.hide()"mdbRippleRadius>Close</button> <buttontype="button"class="btn btn-primary relative waves-light"mdbRippleRadius>Save changes</button> </div> </div> </div>
And remember to use your's sharedComponent in your's app.component.html like this: <app-shared></app-shared>
Try to repeat my code in your's project.
Best Regards,
Damian
alvipeo pro answered 7 years ago
alvipeo pro answered 7 years ago
alvipeo pro answered 7 years ago
Damian Gemza staff commented 7 years ago
Alvipeo, our package is constructed in other way than Material. In Material you have to import every component which you want to use. In our MDB, every components are imported from start, and you have only import our packages (this which you've imported in 5 min quick install guide) - https://mdbootstrap.com/angular/5min-quickstart/ Best Regards, DamianDamian Gemza staff answered 7 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No