sej-ngx-chat-library v0.1.1

Chat Library

ChatLibrary es una biblioteca de Angular que proporciona un componente de chat.

Getting Started

1. Install

   npm install --save sej-ngx-chat-library

2. Import and configuration

   1. Add ChatLibraryModule to imports in src/app/app.module.ts:

   2. Configure OPTIONS in forRoot:

      import { NgModule } from '@angular/core';
      import { BrowserModule } from '@angular/platform-browser';
      import { AppComponent } from './app.component';
      
      import { ChatLibraryModule } from 'sej-ngx-chat-library';
      
      @NgModule({
        declarations: [
          AppComponent
        ],
        imports: [
          BrowserModule,
          ChatLibraryModule.forRoot({
            showAvatarHeader: true,
            showAvatarMessage: true,
            showSeen: true,
            showSendTime: true,
          }),
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { }

3. Add ChatLibraryService and IUsersConfig to imports in src/app/app.component.ts

   import { Component } from '@angular/core';
   
   import { ChatLibraryService } from 'sej-ngx-chat-library';
   import { IUsersConfig } from 'sej-ngx-chat-library/lib/interfaces/users-config.interface';
   
   import { Message } from 'sej-ngx-chat-library/lib/classes/message.class';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })
   export class AppComponent {}

4. Set basic properties

   1. Defined usersConfig: IUsersConfig
   2. Defined messages: Message[] = []
   3. Set usersConfig and messages in constructor
   4. Defined processMessage function

   import { Component } from '@angular/core';
   
   import { ChatLibraryService } from 'sej-ngx-chat-library';
   import { IUsersConfig } from 'sej-ngx-chat-library/lib/interfaces/users-config.interface';
   
   import { Message } from 'sej-ngx-chat-library/lib/classes/message.class';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })
   export class AppComponent {
     usersConfig: IUsersConfig = {
       senderName: '',
       senderAvatar: '',
       senderSeen: new Date(),
       ownerName: '',
       ownerAvatar: ''
     }
   
     messages: Message[] = [];
   
     constructor(private chatLibraryService: ChatLibraryService) {
       this.chatLibraryService.messages = this.messages;
       this.chatLibraryService.usersConfig = this.user;
     }
   
     processMessage(message) {
       ...
     }
   }

5. Add sej-ngx-chat-library to src/app/app.component.html

   <sej-ngx-chat-library (messageSent)="processMessage($event)"></sej-ngx-chat-library>