How to use MDB in child modules? including lazy loading)

web
mobile

Topic: How to use MDB in child modules? including lazy loading)

alvipeo pro asked 2 years ago

I tried to use modal in the child module and got a screen of errors:
> 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?

Damian Gemza staff answered 2 years ago

Hello alvipeo, If you want to use some of our components in other than app.module.ts, you have to create something like SharedModule that includes everything, that you want to share, and then import this module in your's app.module.ts. You can read more about this operations here: https://stackoverflow.com/questions/44471095/how-to-use-parent-module-component-in-child-module-component-in-angular2 Best Regards, Damian

alvipeo pro answered 2 years ago

ok, I've been doing this for Material components. But I have no idea how your components called. And you don't seem to have it in your docs. Like, for example, for modal - https://mdbootstrap.com/angular/advanced/modals/#basicUsage. How do I know what to import? import { what? } from "where" ?

Damian Gemza staff commented 2 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, Damian

alvipeo pro answered 2 years ago

I tried this:
import { NgModule } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
@NgModule({
  imports: [MDBBootstrapModule],
  exports: [MDBBootstrapModule],
  declarations: [],
  providers: [],
})
export class MdbSharedModule { }
and that doesn't work. So how would I construct this shared module?

alvipeo pro answered 2 years ago

ok, I user the following:
import { NgModule } from '@angular/core';
import { ModalModule } from "angular-bootstrap-md";
@NgModule({
  imports: [ModalModule],
  exports: [ModalModule],
  declarations: [],
  providers: [],
})
export class IlgMdbSharedModule { }
and it resolved the error with Modal. But then I get an error for 'Can't bind to 'buttonClass' since it isn't a known property of 'mdb-tabset'.'
ok, I looked at your sources and I see 'buttonClass' is in TabsModule. So I tried
import { ModalModule, TabsModule } from "angular-bootstrap-md";
but it doesn't find it there. So where is it???

Damian Gemza staff answered 2 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 2 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 2 years ago

Alvipeo could you share me your's project at d.gemza@mdbootstrap.com ?

alvipeo pro commented 2 years ago

Sent.

Damian Gemza staff commented 2 years ago

Haven't got mail from you.

alvipeo pro commented 2 years ago

It's sent. I just checked. Topic is 'Lazy loading and independent modules'. Look at the spam folder.

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No