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.
Optional
backgroundOptional
ScreenboardOptional
annotateOptional
local
FlexibleVideo component displays a customizable video grid, supporting dynamic layout and optional screenboard overlay.
Selector
app-flexible-video
Standalone
true
Imports
CommonModule
Inputs
customWidth
(number): The custom width for each video grid item in pixels. Default is 0.customHeight
(number): The custom height for each video grid item in pixels. Default is 0.rows
(number): Number of rows in the video grid. Default is 0.columns
(number): Number of columns in the video grid. Default is 0.componentsToRender
(CustomMediaComponent[]): Array of components to render in the grid.showAspect
(boolean): Flag to control aspect ratio display. Default is false.backgroundColor
(string): Background color for the video grid. Default is 'transparent'.Screenboard
(CustomMediaComponent): Optional screenboard component to overlay on the grid.annotateScreenStream
(boolean): Flag to annotate the screen stream. Default is false.localStreamScreen
(MediaStream): Local screen stream for video.Methods
ngOnInit()
: Initializes and generates the grid on component load ifshowAspect
is true.ngOnChanges(changes: SimpleChanges)
: Updates grid layout and dimensions if properties change.generateGrid()
: Generates grid structure based on rows, columns, andcomponentsToRender
.createInjector(inputs: any)
: Creates and caches an injector for component inputs.Example