Angular 6 compatibility - pazznetwork/ngx-chat GitHub Wiki

The last supported version for Angular 6 is 0.3.2
First of all, install ngx-chat and dependencies via npm:

npm install --save @pazznetwork/[email protected] @xmpp/client@~0.3.0 @angular/cdk@~6.0.0

After that, import ngx-chat in your root module:

@NgModule({
    ...
    imports: [
        ...,
        NgxChatModule.forRoot(),
        BrowserAnimationsModule, // alternatively NoopAnimationsModule 
    ],
    ...
})

Add the ngx-chat-component at the end of your root component template:

<ngx-chat></ngx-chat>

You are now ready to go. You will not see anything until you log in. Log in via ngx-chat wherever you want (e.g. in a component or a service) by injecting ChatService and calling login:

constructor(@Inject(ChatServiceToken) chatService: ChatService) {
    chatService.logIn({
        domain: 'ngx-chat.example',
        uri: 'wss://ngx-chat.example:5280/websocket',
        password: 'password',
        jid: '[email protected]',
    });
}

Add the following to polyfills.ts:

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
(window as any).global = window;

Optional: body padding when roster list is expanded

Add css styling like the following to your main styles.css if you want to resize your main content when the roster is expanded.

body {
    transition-property: padding-right;
    transition-duration: 0.4s;
    padding-right: 0px;
}

body.has-roster {
    padding-right: 14em;
}