Situation: In the current setup of my website, I have implemented two tabs each containing text with a fixed height and enabled content-overflow hidden.
Problem: My goal is to add three dots (icon) when the text overflows. To achieve this, I utilize an expression that effectively recognizes overflow and triggers the addition of an expandButton.
isOverflown: boolean;
hasExpandButton: boolean;
[...]
const overflown = this.isOverflown() ? this.hasExpandButton = true : this.hasExpandButton = false;
The challenge lies in determining where to check for overflowing content since I use this logic in two different sections (specifically in tabs).
When I opt for ngAfterViewInit, the const overflown accurately detects overflow on the first tab but fails to do so on the second tab due to rendering limitations. This occurs because the view is only refreshed on the initial tab switch, neglecting subsequent tabs.
I explored alternative lifecycle-hooks without success in resolving the issue.
Considering ngAfterContentInit along with implementing a variable to track its initial invocation did not yield the desired outcome either.
I appreciate any guidance on this matter.
SOLUTION: Resolving the problem involved disabling lazy loading for the component, ultimately fixing the issue.