Angular Nebular styles does not apply for NbChatComponent

Question

I have an ongoing angular project and I'm trying to add Nebular Chat UI to the project.

I installed nebular with npm and did the imports as mentioned in the site. Functionality is working as expected, but the styles are not applied to the component.

Below are the steps I followed.

1. npm install --save @nebular/theme @angular/cdk @angular/animations
2. npm install --save @nebular/eva-icons

3. Imported NbThemeModule and NbChatModule in app.module.ts

   import { NbThemeModule, NbChatModule } from '@nebular/theme';
   
   @NgModule({
   imports: [
     ...
     NbThemeModule.forRoot(),
     NbChatModule
   ]
   

4. Added styles in angular.json

   "styles": [
         "node_modules/@nebular/theme/styles/prebuilt/default.css"
   

5. Added html component (Sample available in the site)

   <nb-chat title="Nebular Conversational UI">
       <nb-chat-message *ngFor="let msg of messages"
                        [type]="msg.type"
                        [message]="msg.text"
                        [reply]="msg.reply"
                        [sender]="msg.user.name"
                        [date]="msg.date"
                        [files]="msg.files"
                        [quote]="msg.quote"
                        [latitude]="msg.latitude"
                        [longitude]="msg.longitude"
                        [avatar]="msg.user.avatar">
   </nb-chat-message>
   
   <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true">
   </nb-chat-form>
   

Output1

References:

https://akveo.github.io/nebular/docs/guides/install-nebular#manually https://akveo.github.io/nebular/docs/components/chat-ui/overview#nbchatcomponent

Answer 1

I had the same problem and I fixed it by wrapping the chat component in <nb-layout> and <nb-layout-column>. I missed this because I was only going to use the chat component.

   <nb-layout>
    <nb-layout-column>
      <nb-chat title="Chat" size="medium">
        <nb-chat-message
          *ngFor="let msg of messages"
          [type]="msg.type"
          [message]="msg.text"
          [reply]="msg.reply"
          [sender]="msg.user.name"
          [date]="msg.date"
          [files]="msg.files"
          [quote]="msg.quote"
          [latitude]="msg.latitude"
          [longitude]="msg.longitude"
          [avatar]="msg.user.avatar"
        >
        </nb-chat-message>
        <nb-chat-form (send)="sendMessage($event)" [dropFiles]="true"> </nb-chat-form>
      </nb-chat>
    </nb-layout-column>
  </nb-layout>