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

app-flexible-grid

true

CommonModule

  • 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'.
  • 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.
<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

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

  • 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

Properties

customWidth: number = 0
customHeight: number = 0
rows: number = 0
columns: number = 0
componentsToRender: {
    component: any;
    inputs?: any;
}[] = []
backgroundColor: string = 'transparent'
grid: any[][] = []