MediaSFU Angular
    Preparing search index...

    Class FlexibleGrid

    FlexibleGrid

    A dynamic, highly customizable grid component that renders a specified number of rows and columns, with each grid item containing a provided component. Supports full template customization and style overrides.

    FlexibleGrid offers three levels of customization to fit your application's needs:

    1. Basic Usage: Use the default grid layout with configurable rows, columns, and components
    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 grid generation based on rows and columns
    • Flexible component rendering with input injection
    • Automatic grid recalculation on property changes
    • Customizable grid item dimensions and background colors
    • Full template override support for custom layouts

    app-flexible-grid

    true

    CommonModule

    Basic Usage:

    <app-flexible-grid
      [customWidth]="200"
      [customHeight]="150"
      [rows]="2"
      [columns]="3"
      [componentsToRender]="videoComponents"
      backgroundColor="#f0f0f0">
    </app-flexible-grid>

    Style Customization:

    <app-flexible-grid
      [customWidth]="250"
      [customHeight]="200"
      [rows]="3"
      [columns]="4"
      [componentsToRender]="participantComponents"
      [containerStyle]="{
        padding: '20px',
        borderRadius: '12px',
        boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
      }"
      backgroundColor="white">
    </app-flexible-grid>

    Custom Template Override:

    // In your component
    @Component({
      template: `
        <app-flexible-grid
          [customWidth]="300"
          [customHeight]="200"
          [rows]="2"
          [columns]="2"
          [componentsToRender]="components"
          [customTemplate]="customGridTemplate">
        </app-flexible-grid>
        
        <ng-template #customGridTemplate let-gridData>
          <div class="my-custom-grid">
            <h3>Custom Grid Layout</h3>
            <div class="grid-container" 
                 [style.grid-template-columns]="'repeat(' + gridData.columns + ', 1fr)'">
              <div *ngFor="let row of gridData.grid" class="grid-row">
                <div *ngFor="let component of row" class="grid-item">
                  <ng-container *ngComponentOutlet="component.component"></ng-container>
                </div>
              </div>
            </div>
          </div>
        </ng-template>
      `
    })

    customWidth - Width for each grid item in pixels. Default: 0

    customHeight - Height for each grid item in pixels. Default: 0

    rows - Number of rows in the grid. Default: 0

    columns - Number of columns in the grid. Default: 0

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

    backgroundColor - Background color for each grid item. Default: 'transparent'

    containerStyle - Custom CSS styles for the grid container

    customTemplate - Custom ng-template for complete grid layout override

    ngOnInit - Initializes and generates the grid on component load

    ngOnChanges - Regenerates the grid if columns, componentsToRender, or rows change

    generateGrid - Builds the grid based on the row, column, and component configurations

    getGridItemStyle - Returns a style object for each grid item

    createInjector - Creates a cached injector for each component to support dynamic inputs

    Implements

    • OnInit
    • OnChanges
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges generateGrid getGridItemStyle createInjector

    Properties

    customWidth customHeight rows columns componentsToRender backgroundColor containerStyle? customTemplate? grid

    Constructors

    Methods

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    • 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

    customWidth: number = 0
    customHeight: number = 0
    rows: number = 0
    columns: number = 0
    componentsToRender: { component: any; inputs?: any }[] = []
    backgroundColor: string = 'transparent'
    containerStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>
    grid: any[][] = []

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties