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.
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 ifcolumns
,componentsToRender
, orrows
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