Class FlexibleGrid

FlexibleGrid is a dynamic, customizable grid component that renders a specified number of rows and columns, with each grid item containing a provided component.

Selector

app-flexible-grid

Standalone

true

Imports

CommonModule

Inputs

  • customWidth (number): The width for each grid item in pixels. Default is 0.
  • customHeight (number): The height for each grid item in pixels. Default is 0.
  • rows (number): Number of rows in the grid. Default is 0.
  • columns (number): Number of columns in the grid. Default is 0.
  • componentsToRender ({ component: any, inputs?: any }[]): Array of components to render in the grid, each with optional inputs.
  • backgroundColor (string): Background color for each grid item. Default is 'transparent'.

Methods

  • ngOnInit(): Initializes and generates the grid on component load.
  • ngOnChanges(changes: SimpleChanges): 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, including custom width, height, and background color.
  • createInjector(inputs: any): Creates a cached injector for each component to support dynamic component inputs.

Example

<app-flexible-grid
  [customWidth]="100"
  [customHeight]="100"
  [rows]="2"
  [columns]="3"
  [componentsToRender]="[{ component: MyComponent, inputs: { prop: 'value' } }]"
  backgroundColor="lightgrey"
></app-flexible-grid>

Implements

  • OnInit
  • OnChanges

Constructors

constructor

Methods

ngOnInit ngOnChanges generateGrid getGridItemStyle createInjector

Properties

customWidth customHeight rows columns componentsToRender backgroundColor 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

  • getGridItemStyle(): {
        flex: number;
        width: string;
        height: string;
        backgroundColor: string;
        margin: string;
        padding: number;
        borderRadius: string;
    }

  • Returns {
        flex: number;
        width: string;
        height: string;
        backgroundColor: string;
        margin: string;
        padding: number;
        borderRadius: string;
    }

    • flex: number
    • width: string
    • height: string
    • backgroundColor: string
    • margin: string
    • padding: number
    • borderRadius: string

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'

grid

grid: any[][] = []

Settings

Member Visibility

On This Page

Constructors
Methods
Properties