Tutorial

Add Weavy to your app built with Angular

This tutorial will show how to add Weavy to your Angular app using our UIKit.

The final product will be our chat component rendered in your app.

Have your project ready, and let's get started.

Prerequisites

This tutorial is based on Angular v15 or later.

What are we adding, exactly?

We're adding our group chat component to your Angular app using out UIKit.

Want to see how it looks? Well, you're in luck - you can try it out right here with all the bells and whistles.

1. Weavy API Key

We need the backend URL and an API key to communicate with Weavy.

2. Install UIKit Web

Run this in your terminal

npm install @weavy/uikit-web

3. Create Weavy service

Configuring the Weavy backend URL and issuing of access tokens is best done as a service in Angular.

Copy and paste this into a terminal window and run it

ng generate service weavy

This generates the following files:

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

4. Create a demo user

For this tutorial, we're creating a demo user, and for that, we need a display name (what the end user sees) and a unique identifier.

Now it's time to create the user in Weavy through the API using Curl with the information provided.

Copy and paste this into a terminal window and run it

curl WEAVY_URL/api/users -H "Authorization: Bearer ********************" --json "{ 'uid': 'USER_ID', 'name': 'USER_NAME' }"

Replace WEAVY_URL and Bearer ******************** with your backend URL and API key.

Note

Creating a user through Curl is purely for demo purposes and a way to get up and running fast. Users created in Weavy should be done from your backend using our user API endpoints.

5. Issue access token

For our chat component to know who we're rendering for, we must issue an access token that we'll pass on to the UIKit.

Copy and paste this into a terminal window and run it

curl -X POST WEAVY_URL/api/users/USER_ID/tokens -H "Authorization: Bearer ********************"

Replace WEAVY_URL and Bearer ******************** with your backend URL and API key.

This will return an access token - copy and use it below.

Note

Issuing an access token using Curl is for demo purposes only. Access tokens should be created from your backend; read more about authentication and access tokens here.

6. Edit weavy.service.ts

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

Add this to the weavy.service.ts file

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.tokenFactory = async (refresh) => "*******ACCESSTOKEN*******";
  }

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

Replace WEAVY_URL and *******ACCESSTOKEN******* with your backend URL and issued access token.

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 backend.

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

7. Create components

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

Copy and paste this into a terminal window and run it

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

8. Edit chat.component.ts

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

Edit the generated chat.component.ts

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.

9. Edit chat.component.html

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.

Edit the chat.component.html file

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

10. 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.

Edit the app.component.ts file

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";
}

11. Edit app.component.html

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

Edit the app.component.html file

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

12. 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.

Copy and paste this into a terminal window and run it

ng serve

13. Done!

Voilà! Now you have a chat component to integrate anywhere in your web app.

Tutorial

Add Weavy to your app built with Angular

Prerequisites

What are we adding, exactly?

1. Weavy API Key

2. Install UIKit Web

3. Create Weavy service

4. Create a demo user

Note

5. Issue access token

Note

6. Edit weavy.service.ts

7. Create components

8. Edit chat.component.ts

9. Edit chat.component.html

10. Use component

11. Edit app.component.html

12. Run the example

13. Done!

On this page

Next

What's next?

Authentication

Using our UIKit with Angular

Web API

Support

Retool

HubSpot

Atlassian

Don't see your platform?

Overview

Explore demos

Get started

Documentation

All documentation

Changelog

API reference

System status

Frameworks

Web

React

Angular

Vue

Discord

GitHub

Stack Overflow

Hackathons

About

Careers

Contact

Manage account

Sign out

Tutorial

Add Weavy to your app built with Angular

Prerequisites

What are we adding, exactly?

1. Weavy API Key

Sign in

2. Install UIKit Web

3. Create Weavy service

4. Create a demo user

Note

5. Issue access token

Note

6. Edit weavy.service.ts

7. Create components

8. Edit chat.component.ts

9. Edit chat.component.html

10. Use component

11. Edit app.component.html

12. Run the example

13. Done!

On this page

Next

What's next?

Authentication

Using our UIKit with Angular

Web API

Support