projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovParticipantsPanel directive allows to replace the default participants panel template with a custom one. In the example below we replace the participants template in a few lines of code.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false" (onSessionCreated)="subscribeToParticipants()">
<div *ovParticipantsPanel id="my-panel">
<ul id="local">
<li>{{localParticipant.nickname}}</li>
</ul>
<ul id="remote">
<li *ngFor="let p of remoteParticipants">{{p.nickname}}</li>
</ul>
</div>
</ov-videoconference>We need to get the participants in our Session, so we use the ParticipantService to subscribe to the required Observables. We'll get the local participant and the remote participants to update our custom participants panel on any change.
export class ParticipantsPanelDirectiveComponent implements OnInit, OnDestroy {
sessionId = 'participants-panel-directive-example';
tokens!: TokenModel;
localParticipant!: ParticipantAbstractModel;
remoteParticipants!: ParticipantAbstractModel[];
localParticipantSubs!: Subscription;
remoteParticipantsSubs!: Subscription;
constructor(private httpClient: HttpClient, private participantService: ParticipantService) { }
async ngOnInit() {
this.tokens = {
webcam: await this.getToken(),
screen: await this.getToken()
};
}
ngOnDestroy() {
this.localParticipantSubs.unsubscribe();
this.remoteParticipantsSubs.unsubscribe();
}
subscribeToParticipants() {
this.localParticipantSubs = this.participantService.localParticipantObs.subscribe((p) => {
this.localParticipant = p;
});
this.remoteParticipantsSubs = this.participantService.remoteParticipantsObs.subscribe((participants) => {
this.remoteParticipants = participants;
});
}
async getToken(): Promise<string> {
// Returns an OpeVidu token
}
}| Selector | [ovParticipantsPanel] |
Properties |
|
constructor(template: TemplateRef
|
|||||||||
|
Parameters :
|
| Public template |
Type : TemplateRef<any>
|
| Public viewContainer |
Type : ViewContainerRef
|