Skip to main content

Angular

Quickstart​

This quickstart shows how to add Dyte's Livestream SDK to your Angular applications.

Further down this guide we also explain how Dyte's UI component library can help to build your UI faster with components specially made for Livestream applications.

You can also checkout our sample code for Angular. You can clone and run a sample application from the Angular Samples GitHub repository.

Before getting started​

Make sure you've a mechanism to get authToken from your server-side, which you would have received as part of Add Participant call.

Step 1: Install Dyte SDK packages​

To begin, install the following packages:

  • @dytesdk/web-core: This core package powers video, voice, livestream and chat SDKs. This is a required package.
  • @dytesdk/ui-kit: This package includes Dyte UI components which can be used with core to easily build your own UI, including a prebuilt UI component. You can skip installing this package if you wish to build your own UI from scratch.

You can install the SDKs using CDN, npm, or Yarn.

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

Version​

@dytesdk/web-corenpm version
@dytesdk/ui-kitnpm version

Step 2: Prepare meeting object​

Here's a series of steps that you need to perform:

  1. Fetch the authToken from your server-side.
  2. Call the DyteClient.init() method from the web-core package and pass the authToken.
class AppComponent {
  title = 'MyProject';
  dyteMeeting: DyteClient;

  async ngAfterViewInit() {
    const meeting = await DyteClient.init({
      authToken: '<auth-token>',
    });
    this.dyteMeeting = meeting;
  }
}

Now, you have established the connection with the Dyte meeting server successfully.

Step 3: Bring up the UI​

The meeting object serves as the link between web-core and UI Kit, allowing them to communicate with one another. Once the UI Kit has the meeting object, it can join and leave meetings, and so on. Dyte offers a UI Kit that is highly customizatble and uses the meeting instance that you just created.

UI Kit​

A single <dyte-meeting /> component that is feature rich renders a complete meeting UI and handles all events.

Load the DyteComponentsModule into your App Module​

This is how typically the app.module.ts file looks like. This allows you to use Dyte's UI components in your component HTML files. For more information on the components, see Angular components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DyteComponentsModule } from '@dytesdk/angular-ui-kit';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DyteComponentsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

(Optional) Allow synthetic default imports for TypeScript​

If you are using TypeScript, perform the following steps:

  1. Set allowSyntheticDefaultImports as true in your tsconfig.json.
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}
  1. Add the Dyte meeting component to your template file (component.html).
<dyte-meeting #myid></dyte-meeting>

  1. Get a reference to the meeting component using @ViewChild().

  2. Pass the meeting object to the UI Kit component.

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

  async ngAfterViewInit() {
    const meeting = await DyteClient.init({
      authToken: '<auth-token>',
    });
    meeting.join();
    this.dyteMeeting = meeting;

    if (this.meetingComponent) this.meetingComponent.meeting = meeting;
  }
}

Build your own UI​

If you want more customizations, pick the components that are needed and build the UI that suits your need using low level APIs that our core SDK offers here.

Add Dyte Meeting to the Template File​

Load the Dyte component to your template file (component.html).

<div>
  <dyte-grid class="dyte-el"></dyte-grid>
  <div class="controlbar">
    <!-- Your own components -->
    <button #mic (click)="onMicToggle">Toggle Mic</button>
  </div>
</div>

Pass the meeting object to component​

class AppComponent {
  title = 'MyProject';
  dyteMeeting: DyteClient;
  @ViewChild('mic') micButton: HTMLButton;

  async ngAfterViewInit() {
    const meeting = await DyteClient.init({
      authToken: '<auth-token>',
    });

    meeting.join();
    this.dyteMeeting = meeting;
    const elements = document.getElementsByClassName('dyte-el');
    for (i = 0; i < elements.length; i++) {
      elements[i].meeting = meeting;
    }
  }

  onMicToggle() {
    if (this.dyteMeeting.self.audioEnabled) {
      this.dyteMeeting.self.disableAudio();
    } else {
      this.dyteMeeting.self.enableAudio();
    }
  }
}