Hey there! After reviewing your code, I found that solving the issue using @HostListeners was challenging due to recent updates in listening for changes. However, there are alternative solutions that can be just as effective, if not more so, especially when aiming for a cleaner approach. When you modify the hidden status of your elements, your application may forget their previous state. By implementing listeners to detect these changes, your app can re-render tab components accordingly. This process ensures that displayed components are gathered and hidden again to maintain consistency.
Now, let me provide you with a solution:
To maintain up-to-date data sets, we need to introduce new variables like this:
...
resizeTimeout: number;
displayed_data: number[] = [];
dataOfHiddens: number[] = [];
...
After executing the renderTabs function, remember to include the following lines to preserve the latest information:
...
this.activeIndexIsHidden = hiddenItems.includes(this.activeIndex);
this.dataOfHiddens = hiddenItems;
this.displayed_data = displayedItems;
}
}
Use displayedItems to keep track of updates efficiently.
const hiddenItems: number[] = [];
const displayedItems: number[] = [];
When iterating through primary items, adjust their behavior dynamically based on specific conditions. This filtering method allows you to control how each item behaves within the frame:
primaryItems.forEach((item: HTMLElement, index: number) => {
// Check if active index is hidden
if (this.dataOfHiddens.includes(this.activeIndex)) {
// Find the highest index among visible tabs and hide those exceeding it
let ind = Math.max(...this.displayed_data);
if (index >= ind && this.activeIndex != index) {
item.classList.add('tabs__item--hidden');
item.querySelector('button').setAttribute('disabled', 'true');
hiddenItems.push(index);
}
} else if (this.dataOfHiddens.includes(index) && index != this.activeIndex) {
item.classList.add('tabs__item--hidden');
item.querySelector('button').setAttribute('disabled', 'true');
hiddenItems.push(index);
} else if (primaryWidth - safetyOffset >= stopWidth + item.offsetWidth + flexGap) {
stopWidth += item.offsetWidth + flexGap;
displayedItems.push(index);
} else {
if (this.activeIndex != index) {
item.classList.add('tabs__item--hidden');
item.querySelector('button').setAttribute('disabled', 'true');
hiddenItems.push(index);
}
}
});
Ensure to review additional aspects for optimal performance. This solution has been tested and proven to work effectively. Feel free to ask any questions by leaving a comment below.