projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovParticipantPanelItem directive allows to replace the default participant panel item template in the ParticipantsPanelComponent with a custom one.
With *ovParticipantPanelItem 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.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens" [toolbarDisplaySessionName]="false">
<div *ovParticipantPanelItem="let participant" style="display: flex">
<p>{{ participant.nickname }}</p>
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Button 1</button>
<button mat-menu-item>Button 2</button>
</mat-menu>
</div>
</ov-videoconference>export class ParticipantPanelItemDirectiveComponent {
sessionId = 'participants-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 | [ovParticipantPanelItem] |
Properties |
|
constructor(template: TemplateRef
|
|||||||||
|
Parameters :
|
| Public template |
Type : TemplateRef<any>
|
| Public viewContainer |
Type : ViewContainerRef
|