search

akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.05k stars 1.51k forks source link

Nebular is messing up with angular material. #2461

Open collabtaxzen opened 4 years ago

collabtaxzen commented 4 years ago

mat-select and date-picker stop working when I am using nebular.

Getting this error on clicking on material components

ERROR TypeError: Cannot read property 'appendChild' of undefined at NbOverlayContainerAdapter._createContainer (index.js:2006) at NbOverlayContainerAdapter.getContainerElement (overlay.js:741) at Overlay._createHostElement (overlay.js:2649) at Overlay.create (overlay.js:2616) at MatDatepicker._createPopup (datepicker.js:2612) at MatDatepicker._openAsPopup (datepicker.js:2583) at MatDatepicker.open (datepicker.js:2502) at MatDatepickerToggle._open (datepicker.js:3281) at MatDatepickerToggle_Template_button_click_0_listener (datepicker.js:3315) at executeListenerWithErrorHandling (core.js:14296)

tegola commented 3 years ago

I have managed to solve this. See here.

jonkenobi commented 2 years ago

I only wanted to use Nebular's chat UI component, but it messed up my angular material and caused errors as you posted above

I solved it by doing this

  1. Remove all nebular related imports in app.module.ts. (don't need providers or imports) I realized I only needed to import it in the child module 
    
#child.module.ts

@NgModule({ imports:[ NbThemeModule, NbLayoutModule, NbChatModule], declarations: [ChatComponent] })

chat.component.html

.....

chat.component.ts

@Component({ selector: ... templateUrl: ... styleUrls: [...], providers: [NbThemeModule.forRoot().providers] })



With this solution, first of all you won't get errors and angular-material and nebular will both work. 
The problem is, whenever chat.component.ts is created, NbThemeModule.forRoot().providers will make Nebular's default theme css be applied on the whole app. (Something in the library makes it work that way)

In my case, the only part where nb-default-theme was affecting my UI was on a `.nb-theme-default h2`. 
So in style.scss, I did `.nb-theme-default h2{ font: the original css !important}` to overwrite that.
Can also use this solution to try to erase the css on route movements. https://github.com/akveo/nebular/issues/1663#issuecomment-1184924290