File

projects/openvidu-components-angular/src/lib/directives/template/internals.directive.ts

Description

The *ovLayoutAdditionalElements directive allows you to inject custom HTML or Angular templates as additional layout elements within the videoconference UI. This enables you to extend the layout with extra controls, banners, or any custom UI.

You can specify a slot to control where the element is positioned:

• 'top': Position at the top of the layout (after local participant, before remote participants)
• 'bottom': Position at the bottom of the layout (after all participants)
• 'default' or no slot: Position after local participant (default behavior)

Usage examples:

<ov-videoconference>
  <!-- Default position (after local participant) -->
  <ng-container *ovLayoutAdditionalElements>
    <div class="my-banner">Banner</div>
  </ng-container>

  <!-- Top position -->
  <ng-container *ovLayoutAdditionalElements="'top'">
    <div class="top-bar">Top Bar</div>
  </ng-container>

  <!-- Bottom position -->
  <ng-container *ovLayoutAdditionalElements="'bottom'">
    <div class="bottom-info">Footer Info</div>
  </ng-container>
</ov-videoconference>