Getting started with Angular App and Weavy

Note: this tutorial was written for Weavy v8.2, which used a different codebase than the current version of Weavy.

This will guide you through how to set up Weavy in a basic Angular app based on the samples from angular.io. It will create a component for Weavy apps and a service for the Weavy client instance. It requires Weavy v8.2 and has been tested on Angular v7 - v11.

angular+weavy

Install Angular

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-app
cd weavy-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. The script will be available as a runtime-global library. See angular.io/guide/using-libraries for details on how to include the script in your build instead of adding it to HTML.

Add script to HTML

Open src/index.html and add the script tags to the <head> section. For this demo we use our showcase -server, which you can use just to try it out. Then just replace the showcase.weavycloud.com with your own installation.

index.html

<head>
  <!-- ... -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://showcase.weavycloud.com/javascript/weavy.js"></script>
</head>

Create a Weavy service

To create optimal performance, we will place the Weavy instance in a service. This way it will be reusable for each Weavy app 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 ngOnDestroy 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';

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

@Injectable({
  providedIn: 'root'
})
export class WeavyService implements OnDestroy {

  initialized = false;

  jwt;
  weavy;

  constructor() {
    this.jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsaWxseSIsIm5hbWUiOiJMaWxseSBEaWF6IiwiZXhwIjoyNTE2MjM5MDIyLCJpc3MiOiJzdGF0aWMtZm9yLWRlbW8iLCJjbGllbnRfaWQiOiJXZWF2eURlbW8iLCJkaXIiOiJjaGF0LWRlbW8tZGlyIiwiZW1haWwiOiJsaWxseS5kaWF6QGV4YW1wbGUuY29tIiwidXNlcm5hbWUiOiJsaWxseSJ9.rQvgplTyCAfJYYYPKxVgPX0JTswls9GZppUwYMxRMY0';
    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) {
    this.init();
    return this.weavy.space(selector);
  }

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

Configuring JWT

The JWT is for providing user authentication to Weavy. For this demo we use a static JWT that only works for the showcase server. 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.

See docs.weavy.com/client/authentication to read more about setting up JWT authentication.

Create the Weavy app component

You may also use the CLI to create a new component with inline template and styles. It will generate two files in src/app/weavy and adds the component to src/app/app.module.ts.

ng generate component weavy -t -s

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

Define a Weavy container

Add a div to the template section of src/app/weavy/weavy.component.ts. We take advantage of Angular #id to to pass the container rather than the id, to be able to reuse the component several times, otherwise a normal HTML id may only be used once. We also add a style class to make the layout of the div adapt to it's container rather than having it's own layout. The container must always have a defined size.

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

Configure the container in 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 are then defined when using the component and may be anything you like.

@Input() spaceKey!: string;
@Input() spaceName!: string;

@Input() appType!: string;
@Input() appKey!: string;
@Input() appName!: string;

Since we used the angular #id, we 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;
  @Input() spaceName!: string;

  @Input() appType!: string;
  @Input() appKey!: string;
  @Input() appName!: string;

  @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. You must define the component properties with data for the weavy app. See angular.io/guide/inputs-outputs. Remember that the component needs to be placed in a container that has a defined size.

app.component.html

<div style="height: 32rem;">
  <app-weavy [spaceKey]="'angular-space'" [appType]="'files'" [appKey]="'my-files'" [appName]="'My files'"></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.

After that, just run serve and open the app in your browser, usually on http://localhost:4200.

ng serve

Voilà! Now you have a customizable Weavy component to integrate anywhere in your web app!

Tutorials

Getting started with Angular and Weavy

Note: this tutorial was written for Weavy v8.2, which used a different codebase than the current version of Weavy.

Install Angular

Create a fundamental Angular app

Add Weavy client script

Add script to HTML

Create a Weavy service

Initializing the Weavy instance

Configuring JWT

Create the Weavy app component

Define a Weavy container

Configure the container in your component class

Using the Weavy service

Using the Weavy component

Running the example

Support

AI

Messenger

Chat

Feeds

Files

Comments

Cloud

Meetings

Retool

Refine

React

JavaScript

Angular

Vue

Hubspot

Don't see your technology?

All documentation

Changelog

API reference

System status

About

Hackathons

Careers

Contact

Tutorials

Getting started with Angular and Weavy

Note: this tutorial was written for Weavy v8.2, which used a different codebase than the current version of Weavy.

Install Angular

Create a fundamental Angular app

Add Weavy client script

Add script to HTML

Create a Weavy service

Initializing the Weavy instance

Configuring JWT

Create the Weavy app component

Define a Weavy container

Configure the container in your component class

Using the Weavy service

Using the Weavy component

Running the example

Support