projects/openvidu-angular/src/lib/directives/template/openvidu-angular.directive.ts
The *ovStream directive allows to replace the default StreamComponent template injecting a custom one. In the example below we customize the participant's nickname position and styles, replacing the default stream component.
With *ovStream directive we can access to the stream object from its context using the let keyword and
referencing the stream variable: *ovStream="let stream". Now we can access the StreamModel object.
You can run the associated tutorial here.
<ov-videoconference [tokens]="tokens">
<div *ovStream="let stream">
<ov-stream [stream]="stream" [displayParticipantName]="false"></ov-stream>
<p>{{ stream.participant.nickname }}</p>
</div>
</ov-videoconference>export class StreamDirectiveComponent {
sessionId = 'toolbar-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 | [ovStream] |
Properties |
constructor(template: TemplateRef
|
|||||||||
|
Parameters :
|
| Public container |
Type : ViewContainerRef
|
| Public template |
Type : TemplateRef<any>
|