![]() ![]() But I'm not sure that's the best way either. But if you need just in code as wrote:On mousedown, I could then check for the event.target accordingly. Better way is to use parent container component and child to operate. 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. hostListenercan also be used to capture events that occur outside the component. Instead, you'll use verbiage and syntax similar to what you'd use if you were handling this with old-school JavaScript on an HTML page. So you won't use ViewChild or ElementRef here. 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. So keep this in mind: the first option is structured in terms of the Document Object Model (DOM) and not typical Angular coding. I initially set up a directive using as the selector. By doing this, we can check on the window size every time the browser changes size, and this is what we will be using to tell our web app how to react. ![]() You could also add the host-binding inside the Component()-decorator. Setting up a Host Listener in your class to listen to any changes The next step here is to set up a Host Listener to ‘listen’ dynamically to any changes with regards to ‘window: resize’. The goal here is to make ContainerBox movable on screen when a user clicks and drags on the child element DragHandle I just wanted to propose yet another method. (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 |