MediaSFU Angular
    Preparing search index...

    Class AudioGrid

    AudioGrid

    A dynamic grid component specifically designed for rendering audio-only participants with customizable layout and styling. Supports full template customization for complete control over participant presentation.

    AudioGrid provides three levels of customization to display audio-only participants:

    1. Basic Usage: Use the default vertical stacked layout for audio participants
    2. Style Customization: Apply custom styles via containerStyle to modify grid appearance
    3. Full Template Override: Provide a custom ng-template via customTemplate for complete control

    Key Features:

    • Dynamic rendering of audio-only participant components
    • Efficient injector caching for performance optimization
    • Automatic cache clearing on component changes to prevent memory leaks
    • Customizable container styling
    • Full template override support for custom layouts

    app-audio-grid

    true

    CommonModule

    Basic Usage:

    <app-audio-grid 
      [componentsToRender]="[
        { component: AudioCard, inputs: { name: 'John Doe', audioLevel: 0.8 } },
        { component: AudioCard, inputs: { name: 'Jane Smith', audioLevel: 0.5 } }
      ]">
    </app-audio-grid>

    Style Customization:

    <app-audio-grid 
      [componentsToRender]="audioParticipants"
      [containerStyle]="{
        display: 'flex',
        flexWrap: 'wrap',
        gap: '12px',
        padding: '20px',
        backgroundColor: '#f5f5f5',
        borderRadius: '8px'
      }">
    </app-audio-grid>

    Custom Template Override:

    // In your component
    @Component({
      template: `
        <app-audio-grid
          [componentsToRender]="audioParticipants"
          [customTemplate]="customAudioLayout">
        </app-audio-grid>
        
        <ng-template #customAudioLayout let-gridData>
          <div class="custom-audio-grid">
            <h3>Audio Participants ({{ gridData.componentsToRender.length }})</h3>
            <div class="audio-list">
              <div *ngFor="let item of gridData.componentsToRender; let i = index"
                   class="audio-item"
                   [class.active]="i === activeIndex">
                <span class="index">{{ i + 1 }}</span>
                <ng-container *ngComponentOutlet="item.component; injector: createInjector(item.inputs)"></ng-container>
              </div>
            </div>
          </div>
        </ng-template>
      `
    })

    componentsToRender - Array of components with optional inputs to render in the grid

    containerStyle - Custom CSS styles for the grid container

    customTemplate - Custom ng-template for complete grid layout override

    ngOnChanges - Clears the injector cache on changes to componentsToRender

    createInjector - Creates and caches an injector with specific inputs for each component

    clearInjectorCache - Clears the cache to avoid memory leaks and ensure updated injectors

    Implements

    • OnChanges
    Index

    Accessors

    computedContainerStyle

    Constructors

    constructor

    Methods

    ngOnChanges createInjector

    Properties

    componentsToRender containerStyle? customTemplate?

    Accessors

    Constructors

    Methods

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: SimpleChanges

        The changed properties.

      Returns void

    Properties

    componentsToRender: { component: any; inputs?: any }[] = []
    containerStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties