I'm working in an Angular project. I have a component that has responsive functionality. We have logic setup so that we perform the needed responsive functionality whenever the window resizes. We use this to achieve that:
@HostListener("window:resize", ["$event"])
onResize(): void { ... }
That works great when the window sizes changes. However, now we've added a side panel to the page that can be collapsed. We want to perform the responsive functionality when the panel is expanded/collapsed. Or in other words, we want to perform our responsive logic when the size of the component changes, even if the window size is the same.
How can we achieve this?
@HostListener("window:resize", ["$event"]), so your component is checking for a resize event. The logic is already there. But what you could do also, is a "resizeService", which triggers an event when the window resize, and when the sidebar toggles. So your component would only subscribe to one event, and doesn't have to know who triggers it