projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovPanel directive allows to replace the default panels with your own custom panels. This directive also allows to insert elements tagged with the ChatPanelDirective, ParticipantsPanelDirective and AdditionalPanelsDirective.
In the example below we replace the entire PanelComponent using the *ovPanel directive. Inside of it, we customize the ParticipantsPanelComponent and ChatPanelcomponent using their own directives.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens">
<ov-panel *ovPanel>
<div *ovChatPanel id="my-chat-panel">This is my custom chat panel</div>
<div *ovParticipantsPanel id="my-participants-panel">
This is my custom participants panel
</div>
</ov-panel>
</ov-videoconference>export class PanelDirectiveComponent {
sessionId = "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 | [ovPanel] |