Topic: Angular module scope to components broken.
- Follow the directions to create a project using Angular MDB.
- Add some sample code to app.component.html. I used flip cards example.
- Run your code using "ng serve". I know their instructions say to use "npm start", but that's old school. ng serve is the new norm. --It all works and looks good.
- Now create a new component, because no one uses app.component.html for their working code...that's just a main hub. At the prompt, type "ng g component components/demo". This creates a component in the standard way with 4 necessary files, .html, .scss, .spec.ts, and .ts.
- Now move the sample code to the demo.html and everything breaks.
This is a scoping issue. Other material components don't seem to have this issue. For example, I can import the FormsModule in app.module.ts, and then in the component demo.ts, i can type "import { FormGroup, FormControl } from '@angular/forms';" and then access the functionality of FormGroup by declaring a variable with that as it's type. But because MDB does everything (or most things) in the HTML, there's no suggestion as to how to declare the necessary functionality in the demo.ts in order to extend the scope to the adjacent HTML. So, within the demo.html scope, it doesn't know anything about MDB.
Looking at your API page for flipping cards, it says only to declare, "import { CardsModule, WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'" in app.module. By the way, I don't use the massive all-in-one module because i want my app to be as small as possible. The API instructions completely fails to mention AnimatedCardsModule, which is also required for the MDB flipping cards to work, and must be declared as AnimatedCardsModule.forRoot(), in the imports[] section below the main import{}. That was a painful 45 minutes I want back in my life.
Looking at the example code page, it only shows HTML and nothing additionally about the import to the *.ts file for the component. Would it be asking too much if someone could tell me how to extend the scope for flipping cards to a sub component so my app won't be so flat and huge in one file? I can then apply this learning to all the other elements from your platform that also don't work in components.
Thanks.
You can find information about necessary imports in the API section of the component documentation (you need change the tab at the top of the page). We will add missing import to the Flipping Cards API, thank you for letting us know about this problem.
Please check if your 'demo' component was correctly added to the app.module declaration, because otherwise it won't have access to the imported MDB modules.
If your 'demo' component is part of a lazy loaded feature module, then you need to import the MDB modules again, because your demo module will have other scope than app.module.
We only provide HTML code for flipping cards because you don't need any additional TS code to make it work in your application.
appresearcher commented 5 years ago
When you say, "Please check if your 'demo' component was correctly added to the app.module declaration", I'm assuming you mean the @NgModule({declorations: [..., DemoComponent],...}) Section? Yes, it's there. I can copy the code from demo.component.html to app.component.html, which is up one folder in the stack, and it works. Can you explain how to "import the MDB modules again"? I have this line at the top of my demo.component.ts file... import {AnimatedCardsModule, ButtonsModule, CardsModule, CarouselModule, IconsModule, InputsModule, ModalModule,
PopoverModule, MDBSpinningPreloader, ToastModule, WavesModule } from 'ng-uikit-pro-standard'; but it's greyed-out, meaning it never gets called in the TS code, which is also correct. What more do I need to do to make this available to the HTML at the component level? Thanks.
Arkadiusz Idzikowski staff commented 5 years ago
All modules that you import from 'ng-uikit-pro-standard' should be added to the imports array in the @NgModule, but I think you've already done that if our component works in app.component.
The problem is probably in MDB/module configuration. Can you send a simple demo app on which I will be able to reproduce this issue to a.idzikowski@mdbootstrap.com? I think it will be the easiest way to find the cause of this problem.
appresearcher commented 5 years ago
There were two problems... 1) I had a tag in app.component.html above the route to the component module (modifying that helped) and 2) the in app.component.html that hosted the route set "color:white" which forced all of your visual elements to be white-on-white. Perhaps there's a way to break that inheritance in your formatting for your elements? Anyway... it's working now. thanks.
Arkadiusz Idzikowski staff commented 5 years ago
Glad it works. The styles should not be inherited unless you turned the styles encapsulation of your component to 'None'. If you encounter any further problems with that, please create new thread and add more detailed description.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.10.0
- Device: Surface Pro
- Browser: Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: No