Add chat to your app | Angular | Chat API & SDK

Install Angular

The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15.

Install Angular CLI globally. See angular.io/cli. The version of CLI you have will define which Angular version you will have in your project.

npm install @angular/cli -g

To install older versions or downgrade your CLI use the tag @vX-lts, where X is the version, or use @latest. See npmjs.com/package/@angular/cli

npm install @angular/cli@v7-lts -g

Create a fundamental Angular app

Set up an Angular app with or without strict mode or routing. It will create a project folder with all needed files including package.json and git etc. It's probably wise to include routing.

ng new weavy-angular-app
cd weavy-angular-app

If you want to try routing and navigating between components, you can follow the example on angular.io/guide/router

Add Weavy client script

You can add the Weavy client in two ways; by including it normally as a script tag in HTML or as an included script in the build.

Add script to HTML

Open src/index.html and add the script tags to the <head> section. Replace {your-server-domain} with your server domain URL when you have set up your own installation.

index.html

<head>
    ...
    <script src="https://{your-server-domain}/javascript/weavy.jquery.js"></script>
</head>

Add script to build

Download weavy.jquery.js from your installation.

Copy weavy.jquery.js to src/assets

Include weavy.jquery.js in angular.json scripts section.

Note: You can include jQuery the same way if you want to use it in Angular, but then you should use the unbundled weavy.js

angular.json

{
    "projects": {
        "weavy-angular-app": {
            "architect": {
                "build": {
                    "options": {
                        "scripts": [
                            "src/assets/weavy-8.1.0+weavy.9d9087153.jquery.js"
                        ]
                    }
                }
            }
        }
    }
}

Create a Weavy service

To create optimal performance, we will place the Weavy instance in a service. This way it will be reusable for the Weavy component and we will avoid redundant initialization and calls to the server.

The simplest way to create a new service is to use the CLI. It will generate two files in src/app

ng generate service weavy

src/app/weavy.service.spec.ts
src/app/weavy.service.ts

Initializing the Weavy instance

We will create the Weavy instance in the service constructor and delay initialization to on-demand to avoid slow rendering. The service will also handle the authentication.

You must declare Weavy to be able to reference it in the service since it's defined globally.

We create a wrapper for the weavy.space() function for convenience and to initialize automatically on demand. You may also use all other functionality in Weavy since we expose the Weavy instance as a property in the service.

To handle destruction simply just call weavy.destroy() in the OnDestroy hook. You need to import { OnDestroy } from '@angular/core' and also add class WeavyService implements OnDestroy.

weavy.service.ts

import { Injectable, OnDestroy } from '@angular/core';

// The Weavy class must be declared for usage
declare let Weavy : any;

@Injectable({
  providedIn: 'root'
})

export class WeavyService implements OnDestroy {
    initialized: boolean = false;
    jwt: any; // String, function or promise
    weavy: any; // The weavy instance

    constructor() {
        // Place your JWT token string here
        this.jwt = '{your-generated-jwt-token}';
        this.weavy = new Weavy({ jwt: this.jwt, init: false });
    }

    init(): void {
        if (!this.initialized && !this.weavy.isInitialized) {
            this.weavy.init();
        }
        this.initialized = true;
    }

    space(selector: any): any {
        this.init();
        return this.weavy.space(selector);
    }

    ngOnDestroy(): void {
        this.weavy.destroy();
    }
}

Configuring JWT

The JWT is for providing user authentication to Weavy. The simplest way to get running is to simply paste a valid JWT string into the example before you run it. The proper way to implement JWT is to create a service that you reference in your Weavy service class constructor. The service should then preferably just return a promise for the token.

Create the Weavy Chat component

You may also use the CLI to create a new component. It will generate two files in src/app/weavy

ng generate component weavy -t -s

src/app/weavy/weavy.component.spec.ts
src/app/weavy/weavy.component.ts

Define a Weavy container in your component class

Edit the src/app/weavy/weavy.component.ts. Define a div in the template field. Use an angular #id to be able to pass a unique container to Weavy.

weavy.component.ts

@Component({
    selector: 'app-weavy',
    template: '<div #weavyContainer class="weavy-container"></div>',
    styles: ['.weavy-container { display: contents; }']
})

Configure your component class

You can bind Weavy options to component properties to be able to reuse your component. This is done using @Input() to decorate the properties. Note that you need to import { Input } from '@angular/core'. The keys may be anything you'd like.

export class WeavyComponent implements OnInit {
    @Input() spaceKey: string = "angular-global";
    @Input() spaceName: string = "Angular Global Space";

    @Input() appType: string = "messenger";
    @Input() appKey: string = "angular-chat";
    @Input() appName: string = "Angular Chat";
}

If you used the angular #id, you need to also import { AfterViewInit, ViewChild, ElementRef } from '@angular/core' and add class WeavyComponent implements AfterViewInit. The element of the container can then be referenced as an ElementRef using @ViewChild() decorator.

@ViewChild('weavyContainer') weavyContainer!: ElementRef;

// The weavyContainer is not available until the view has been initialized
ngAfterViewInit() {
    console.log(this.weavyContainer!.nativeElement)
}

Using the Weavy service

To make use of the Weavy service we need to import { WeavyService } from '../weavy.service' in our component and then reference it in the constructor.

constructor(private weavy : WeavyService) { }

To handle destruction we just remove the Weavy app in the OnDestroy hook. You need to import { OnDestroy } from '@angular/core' and also add class WeavyComponent implements OnDestroy.

ngOnDestroy(): void {
    this.weavyApp!.remove();
}

Here is the complete component class

weavy.component.ts

import {
    Component, OnInit, OnDestroy,
    Input,
    AfterViewInit, ViewChild, ElementRef
} from '@angular/core';
import { WeavyService } from '../weavy.service';

@Component({
    selector: 'app-weavy',
    template: '<div #weavyContainer class="weavy-container"></div>',
    styles: ['.weavy-container { display: contents; }']
})
 
export class WeavyComponent implements OnInit, AfterViewInit, OnDestroy {
    @Input() spaceKey: string = "angular-global";
    @Input() spaceName: string = "Angular Global Space";

    @Input() appType: string = "messenger";
    @Input() appKey: string = "angular-chat";
    @Input() appName: string = "Angular Chat";

    @ViewChild('weavyContainer') weavyContainer!: ElementRef;

    weavySpace: any;
    weavyApp: any;

    constructor(private weavy : WeavyService) { }

    ngOnInit(): void {
        this.weavySpace = this.weavy.space({
            key: this.spaceKey,
            name: this.spaceName,
        })
    }

    ngAfterViewInit(): void {
        // After the view is initialized and the weavyContainer is available
        this.weavyApp = this.weavySpace.app({
            type: this.appType,
            key: this.appKey,
            name: this.appName,
            container: this.weavyContainer!.nativeElement
        });
    }

    ngOnDestroy(): void {
        this.weavyApp!.remove();
    }
}

Using the Weavy component

To use the Weavy component simply reference it in your src/app/app.component.html template. The component will adjust itself to the size of the parent container, therefore you need to set a height on the surrounding container somehow. Otherwise, the component will have a height of 0. If you want to make use of the properties, you need to reference them from your component class or define them as strings in the property. See angular.io/guide/inputs-outputs

app.component.html

<div style="height: 100vh">
    <app-weavy [appType]="'messenger'" [appKey]="'my-chat'"></app-weavy>
</div>

Running the example

To test the example you can use ng serve, which will compile and start a test server. It also recompiles and reloads the app in the browser whenever you make changes. If you have configured a different server name for your localhost, such as http://mycomputer.local, you need to specify it as publicHost in the angular.json serve settings to use it.