1. Frameworks
  2. Angular

Using Weavy with Angular

Angular plays nice with custom elements, so you can use UIKit Web in your Angular apps with ease. You just need to create an Angular service for configuring the Weavy environment url and authentication endpoint.

Prerequisites

  • A Weavy environment.
  • An 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 of all you should setup 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 UIKit Web

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("https://myenvironment.weavy.io");
    this.weavy.tokenUrl = new URL("https://myserver.test/api/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 authentication endpoint.

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

Create components

Next, you need to create components for the Weavy building blocks you want to use. In this example we'll create a component for the chat block.

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 also create additional components for other building blocks, such as Posts, Files or the Messenger.