Angular cdk-virtual-scroll-viewport return 0 when calling getBoundingClientRect

Question

I have a table component which is contained inside cdk-virtual-scroll-viewport . One of the column cell contains

'..more'

option that expands the entire row. But when scrolled up/down the row collapses due to the nature of scroll-viewport(user wants it to stay expanded). I resolved this by adding display: contents .

cdk-virtual-scroll-viewport {
  height: 100%;
  min-height: 200px;
  display: contents; 
}

But this altered the positioning (top,left arrangement) of popup component inside the table as we are passing the CdkVirtualScrollViewport as @INPUT to the popup component to calculate the position (top, bottom, left, right) for showing the popup

I saw CdkVirtualScrollViewport.nativeElement.getBoundingClientRect() returning

DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0, …}

when the display:content is set.

Can anyone tell me why it is returning "0"

Answer 1

If you're using @Input, the value doesn't get passed to the component until it gets initialized (ngOnInit). You can use the lifecycle ngOnChanges instead so that the value gets passed before the component initializes.

For example:

ngOnChanges(changes: SimpleChanges) {
if (changes.inputName && changes.inputName.previousValue !== changes.inputName.currentValue) {
...use renderer to set your styles
   }
}