projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovParticipantPanelItemElements directive allows to add elements to the ParticipantsPanelItemComponent. In the example below we add a simple button to disconnect from the session.
With *ovParticipantPanelItemElements directive we can access the participant object from its context using
the let keyword and referencing the participant variable: *ovParticipantPanelItem="let participant".
Now we can access the ParticipantAbstractModel object and enable the button just for the local participant.
You can run the associated tutorial here.
<ov-videoconference
*ngIf="connected"
[tokens]="tokens"
[toolbarDisplaySessionName]="false">
<div *ovParticipantPanelItemElements="let participant">
<button *ngIf="participant.local" (click)="leaveSession()">
Leave
</button>
</div>
</ov-videoconference>
<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>export class ParticipantPanelItemElementsDirectiveComponent {
sessionId = "participants-panel-directive-example";
tokens!: TokenModel;
connected = true;
constructor(private httpClient: HttpClient, private openviduService: OpenViduService) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken(),
};
}
leaveSession() {
this.openviduService.disconnect();
this.connected = false;
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovParticipantPanelItemElements] |
Properties |
|
constructor(template: TemplateRef
|
|||||||||
|
Parameters :
|
| Public template |
Type : TemplateRef<any>
|
| Public viewContainer |
Type : ViewContainerRef
|