@dytesdk/angular-ui-kit

Angular UI Kit by dyte

A set of UI components to truly customize your meeting UI, in Angular
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• Getting Started
• Usage
• About

Getting Started

There are separate UI Kit packages for VanillaJS and React. Check out the links to the packages below

UI Kit · React UI Kit

First, you will need to install the ui-kit along with the web-core package:

npm i @dytesdk/angular-ui-kit @dytesdk/web-core

The web-core package is the package which handles all the low level logic required for a meeting by interating with our servers. Use it to create a meeting object, which you can pass along to the UI Kit components.

Usage

Load the component in your template file (component.html):

<dyte-meeting #myid></dyte-meeting>

Then initialize and pass the meeting object to the component:

class AppComponent {
  title = 'MyProject';
  @ViewChild('myid') meetingComponent: DyteMeeting;
  dyteMeeting: DyteClient;

  async ngAfterViewInit() {
    const meeting = await DyteClient.init({
      roomName: '<room-name>',
      authToken: '<auth-token>',
      defaults: {
        video: true,
        audio: true,
      },
    });
    meeting.joinRoom();
    this.dyteMeeting = meeting;
    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
  }
}

About

angular-ui-kit is created & maintained by Dyte, Inc. You can find us on Twitter - @dyte_io or write to us at dev [at] dyte.io.

The names and logos for Dyte are trademarks of Dyte, Inc.

We love open source software! See our other projects and our products.