Frameworks
Angular

Using Weavy with Angular

Angular plays nice with custom elements, so you can install the Weavy UIKit in your Angular projects with npm just as normal. You just need to create an additional Angular service for configuring the Weavy instance.

Prerequisites

A Weavy environment.
A token endpoint in your backend that can provide an access_token for your authenticated user.
Angular v15 (also works in Angular v7 and up with some minor modifications).

Configure Angular project

First you need an Angular project. If you already have an Angular project you can skip this step.

Install Angular CLI

The Angular CLI is used to create an Angular project and to create components for your project. Install Angular CLI globally. See https://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 of Angular or downgrade your CLI use the version tag @vX-lts, where X is the version, or use @latest. See npmjs.com/package/@angular/cli.

Create Angular app

Create an Angular app using the CLI. Choose any settings you prefer.

ng new weavy-example-app
cd weavy-example-app

Install the Weavy UIKit

Next, install the Weavy UIKit.

npm install @weavy/uikit-web

Create Weavy service

Configuring the Weavy environment url and authentication for Weavy is best done as a service in Angular (that way it can be used anywhere in your project).

ng generate service weavy

This generates the following files:

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

Open the generated weavy.service.ts file in your editor and add the following code.

import { Injectable, OnDestroy } from "@angular/core";
import { Weavy } from "@weavy/uikit-web";

@Injectable({
  providedIn: "root",
})
export class WeavyService implements OnDestroy {
  weavy = new Weavy();

  constructor() {
    this.weavy.url = new URL("{WEAVY-URL}");
    this.weavy.tokenUrl = new URL("https://example.com/myapp/token");
  }

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

First we import the @weavy/uikit-web package and create a new Weavy instance (importing the Weavy package also registers the web components for usage). Then we configure it with the url to your Weavy environment and point the tokenUrl to your token endpoint.

To handle destruction of Weavy properly, you need to implement the OnDestroy interface in Angular.

Create components

Next, you need to create corresponding Angular components for the Weavy components you want to use. In this example we'll create one for the Chat component.

ng generate component chat

This generates the following files:

src/app/chat/chat.component.css
src/app/chat/chat.component.html
src/app/chat/chat.component.spec.ts
src/app/chat/chat.component.ts

Edit the generated chat.component.ts file and add the following code:

import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from "@angular/core";
import { WeavyService } from "../weavy.service";

@Component({
  selector: "app-chat",
  standalone: true,
  imports: [],
  templateUrl: "./chat.component.html",
  styleUrl: "./chat.component.css",
  providers: [WeavyService],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ChatComponent {
  @Input() uid!: string;

  constructor(private weavyService: WeavyService) {
    this.weavyService = weavyService;
  }
}

You need to add the uid property to the component with the @Input() decorator so that you can use the component dynamically.

To make external custom web components valid in the Angular HTML, you need to add the CUSTOM_ELEMENTS_SCHEMA. As of Angular v15.2 you need to make the component standalone by adding standalone: true.

You also need to connect the Weavy service to the component. This is done by importing our WeavyService, define it as a provider and adding a reference to it in the constructor.

Next, you'll add the HTML for the chat building block in chat.component.html. Note the property binding for the uid property to the web component.

<wy-chat [uid]="uid"></wy-chat>

Use component

To use the chat component you first need to import the ChatComponent and reference it in the imports in the app component src/app/app.component.ts.

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { ChatComponent } from "./chat/chat.component";

@Component({
  selector: "app-root",
  standalone: true,
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  imports: [RouterOutlet, ChatComponent],
})
export class AppComponent {
  title = "weavy-example-app";
}

Then you can simply reference it in your src/app/app.component.html template using the defined component selector name.

<app-chat uid="my-chat"></app-chat>

Run the example

To test the example you can use the built-in Angular dev server, which will compile and start a test server. It also recompiles and reloads the app in the browser whenever you make changes.

Try it out by running ng serve in your terminal and open the app in your browser, usually on http://localhost:4200.

ng serve

Voilà! Now you have a chat component to integrate anywhere in your web app! You can of course perform the same steps for any other component you need, such as Posts, Files or the Messenger.

Tutorials and more

For additional info and tutorials on using Weavy with Angular you should also visit our technology page on Angular.