Angular 4 host listener on resize parent11/10/2023 ![]() ![]() This happens when the viewport changes but our component doesn't. Unfortunately window.onchange sometimes fires too often or not at all. We are only interested in events where our component changes its width. □ What's the problem with window.onchange? In this article we will have a look at how it works and how we can use this new API together with Angular. ResizeObserver ResizeObserver - Web APIs | MDN is a new API to solve exactly this problem. Both solutions are based on the viewport dimension, not the element dimension. This is usually implemented with either window.onchange or matchMedia. But sometimes we need to know when an element is resized and execute some logic in JavaScript. Many changes in screen size or element size can be handled with pure CSS. That's why I've created a library to simplify the usage with Angular. I found it to cumbersome to do it on every component. There are a few steps required to use it properly with Angular. ResizeObserver is a new API which allows us to react to element resizing. ![]() But I'm not sure that's the best way either.Sometimes we need to execute JavaScript when an element is resized.Ĭurrent solutions are based on the viewport dimension, not on element dimensions. On mousedown, I could then check for the event.target accordingly. But that feels messy.Īlternatively, I could apply my directive to the via setting the selector. I suppose I could create a JS function that grabs the parent, checks for a matching class name of 'draggableContainer' and if so, done, if not, grabs the parent of that element, checks again, and so on until it finds the parent that matches. ![]() This allows me to set a mousedown HostListener to determine when a user has clicked on that object.īut.I don't see a clean 'angular way' to now change the css of the div two parents up. I initially set up a directive using as the selector. The goal here is to make ContainerBox movable on screen when a user clicks and drags on the child element DragHandle (note, the HTML for ContainerBox is in one component template, the HTML for DragHandle is in a different component template) The premise is that I have this type of structure: I still have some plain-js/jquery thinking in my head and struggling to get the 'angular way' to handle this. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |