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

Benedikta

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>

Themistocles

Hi does anyone know how can I store files received from chat component? – Systaltic

I tried to add the chat only to my angular app that has angular material, i would have NEVER guessed this solution. Thanks ! – Wayward