How to use only one component without applying the whole theme styles to the application?

[henryyue2010]

I am trying to use NbChatComponent in my Angular application without applying the whole Nebular theme styles. How to get the default nebular style only apply to the Angular component which uses NbChatComponent? Any samples? Thank you very much in advance for your help. Henry

[yggg]

Hi @henryyue2010. You can do this by calling mixins for individual components inside nb-install. Since chat is using a button, input and icon components under the hood you need to include styles for these components as well. Also, you need to keep track of module dependencies added in the future as it potentially could require more styles to be added.

To sum up:

1. Setup custom theming. You can skip modifying theme variables if you don't need to.
2. Change styles.scss to have styles in nb-install only for the chat and it's dependencies:

   @include nb-install() {
   @include nb-chat-theme();
   @include nb-icon-theme();
   @include nb-buttons-theme();
   @include nb-input-theme();
   };

[filol]

Hi @yggg , I'm trying to do exactly the same thing, ie import the component chat only into a component. I use for the rest of my Material Angular application and it seems that the 2 comes into conflict (it's a shame). I did what you said but I'm still full of error type ERROR TypeError: Can not read property 'appendChild' of undefined, distorted images, ... How to really limit nebular to a single component?

[AmmarIsmaeel]

Me too, I am having the same problem and I really need and answer How to really limit nebular to a single component?

[el7or]

Me too, I am having the same problem and I really need and answer How to import the chat component only into my application without applying the whole theme styles to the application?

[dinohorvat]

You can use Angular Elements (Web components)

[KagariSan]

Me too, I am having the same problem and I really need and answer How to import the chat component only into my application without applying the whole theme styles to the application?

Hi, there is how I use only one component for project without apply style to another component.

• First: install it normally by running ng add @nebular/theme or by manually.

• Second: if you install it by running command then go to AppModule and AppComponent, revert what nebular added to your template like this one

  <nb-layout>
    <nb-layout-header fixed>Company Name</nb-layout-header>
    <nb-sidebar>Sidebar Content</nb-sidebar>
    <nb-layout-column>
      Page Content <button nbButton>Hello World</button>
    </nb-layout-column>
  </nb-layout>

• After this, you can use nebular component by grab it between, remember import nb-layout, nb theme module too

  <nb-layout>
    <nb-layout-column>
  <Your nebular HTML go here>
    </nb-layout-column>
  </nb-layout>

P/S: there will be redundant over there and there but at least nebular style will not apply over other component of your project. Maybe better solution out there, better keep looking :eyes:

[Alec2435]

For those dealing with the problem Nebular causes with ERROR TypeError: Can not read property 'appendChild' of undefined while trying to use just a single Nebular component, there's an easy fix I just found.

Go to your app.module.ts and in the providers array (add one if you don't have one) add { provide: OverlayContainer } and it should fix the issue for the most part.

[truonghoangduy]

For those dealing with the problem Nebular causes with ERROR TypeError: Can not read property 'appendChild' of undefined while trying to use just a single Nebular component, there's an easy fix I just found.

Go to your app.module.ts and in the providers array (add one if you don't have one) add { provide: OverlayContainer } and it should fix the issue for the most part.

You save my date 👍

My Angular Tree

[tegola]

I have managed to solve this. See here.

[eliasmatheus]

For those dealing with the problem Nebular causes with ERROR TypeError: Can not read property 'appendChild' of undefined while trying to use just a single Nebular component, there's an easy fix I just found.

Go to your app.module.ts and in the providers array (add one if you don't have one) add { provide: OverlayContainer } and it should fix the issue for the most part.

Wow! That worked.

Thank you!

[CleydermanG]

For those dealing with the problem Nebular causes with ERROR TypeError: Can not read property 'appendChild' of undefined while trying to use just a single Nebular component, there's an easy fix I just found. Go to your app.module.ts and in the providers array (add one if you don't have one) add { provide: OverlayContainer } and it should fix the issue for the most part.

You save my date 👍

My Angular Tree

Thank you!!

[engo2002]

// this is our just created themes.scss file, make sure the path to the file is correct
@use 'themes' as *;

// framework component styles
@use '@nebular/theme/styles/globals' as *;

// install the framework styles
@include nb-install() {
  @include nb-popover-theme();
}

I just want to use the popover-component at the moment. With the provided solution, I get a "Undefined mixin." error.

Does someone have an idea to solve this?

[AhmedMansour92]

Hi @henryyue2010

Solved

1. add this line in imports of app.module.ts

imports: [  
    NbThemeModule.forRoot({ name: 'default' }),
]

2.app.component.html ;

<nb-layout>
    <nb-layout-column>
        <main>
            <router-outlet></router-outlet>
        </main>
    </nb-layout-column>
</nb-layout>

3. Make sure that the following code is part of styles.scss ;

@use 'themes' as *;
@use '@nebular/theme/styles/globals' as *;
@include nb-install() {
  @include nb-theme-global();
};

4. themes.scss ;

@forward '@nebular/theme/styles/theming';
@use '@nebular/theme/styles/theming' as *;
@use '@nebular/theme/styles/themes/default';

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-primary-100: #f2f6ff,
  // color-primary-200: #d9e4ff,
), default, default);

5. in app.component.ts add this piece of code in ngOnInit()

  ngOnInit(): void {
      this.router.events.subscribe((event) => {
          document.body.classList.remove('nb-theme-default');
      });
  }

• This will remove the nebular theme from all the app.

6. in the component you want to apply the theme add this in ngOnInit()

  ngOnInit(): void {
    document.body.classList.add('nb-theme-default');
  }

• This will add the nebular theme @ the current component.

[jonkenobi]

I solved it by doing this