Class FlexibleGrid

Component

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.

Description

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

Selector

app-flexible-grid

Standalone

true

Imports

CommonModule

Example

Basic Usage:

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

Example

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>

Example

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>
  `
})

Input

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

Input

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

Input

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

Input

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

Input

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

Input

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

Input

containerStyle - Custom CSS styles for the grid container

Input

customTemplate - Custom ng-template for complete grid layout override

Method

ngOnInit - Initializes and generates the grid on component load

Method

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

Method

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

Method

getGridItemStyle - Returns a style object for each grid item

Method

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

Implements

  • OnInit
  • OnChanges

Constructors

constructor

Methods

ngOnInit ngOnChanges generateGrid getGridItemStyle createInjector

Properties

customWidth customHeight rows columns componentsToRender backgroundColor containerStyle? customTemplate? grid

Constructors

constructor

Methods

ngOnInit

  • ngOnInit(): void

  • 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

ngOnChanges

  • ngOnChanges(changes): 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

generateGrid

getGridItemStyle

createInjector

Properties

customWidth

customWidth: number = 0

customHeight

customHeight: number = 0

rows

rows: number = 0

columns

columns: number = 0

componentsToRender

componentsToRender: {
    component: any;
    inputs?: any;
}[] = []

backgroundColor

backgroundColor: string = 'transparent'

OptionalcontainerStyle

containerStyle?: Partial<CSSStyleDeclaration>

OptionalcustomTemplate

customTemplate?: TemplateRef<any>

grid

grid: any[][] = []

Settings

Member Visibility

On This Page

Constructors
Methods
Properties