projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
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.
<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.
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
}
}| Selector | [ovActivitiesPanel] |
Properties |
|
constructor(template: TemplateRef
|
|||||||||
|
Parameters :
|
| Public template |
Type : TemplateRef<any>
|
| Public viewContainer |
Type : ViewContainerRef
|