File

projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts

Description

The *ovActivitiesPanel directive allows to replace the default activities panel template with a custom one. In the example below we replace the activities template in a few lines of code.

You can run the associated tutorial here.

Example :
<ov-videoconference
    [tokens]="tokens"
    [toolbarRecordingButton]="false"
    [toolbarDisplaySessionName]="false">
    <div *ovActivitiesPanel id="my-panel">
        <h3>ACTIVITIES</h3>
        <div>
            CUSTOM ACTIVITIES
        </div>
    </div>
</ov-videoconference>

As we need to assign the OpenVidu Tokens to the VideoconferenceComponent, we request them on the ngOnInit Angular lifecycle hook.

Example :
export class AppComponent implements OnInit {

    sessionId = "activities-panel-directive-example";
    tokens!: TokenModel;

    constructor(private httpClient: HttpClient) { }

    async ngOnInit() {
        this.tokens = {
            webcam: await this.getToken(),
            screen: await this.getToken(),
        };
    }

    async getToken(): Promise<string> {
        // Returns an OpeVidu token
    }

}

Metadata

Index

Properties

Constructor

constructor(template: TemplateRef, viewContainer: ViewContainerRef)
Parameters :
Name Type Optional
template TemplateRef<any> No
viewContainer ViewContainerRef No

Properties

Public template
Type : TemplateRef<any>
Public viewContainer
Type : ViewContainerRef

results matching ""

    No results matching ""