last day (15 days later) » 

2:16 PM
0
Q: The mousemove event throws error in angular

EnthuI am trying to calculate the top and left of *ngfor elements wrt to parent element The mousemove function throws me an error. I tried referencing the parent element to capture the mousemove private elem; private container; private mouse = { x: null, y: null, down: false }; private will_dr...

 
@Flix, I had reffered this and I am using viewchild but its not helping , and also the ngfor elements will be dragged and dropped , then I need to calculate top and left
The error message: ERROR Error: Unsupported event target null for event mousemove
 
The error is not ViewChild, the error is that the HostListener on documentMouseMove is not supported in that way. The string flo:mousemove is not valid. The only valid values are document:mousemove, window:mousemove, body:mousemove or mousemove.
 
@Flix So how can I capture mousemove event , I had referred earlier before posting this question for the post u mentioned but not able to resolve it , if u could give any solution it would be really helpfull, thanks, the ngfor comes into play once the elements are dragged and dropped
 
Use a custom directive, as mentioned here.
 
2:16 PM
@Flix any other way other than custom directive , what if I mention the event as( we do click) for mousemove, is that a valid one, and instead of writing a directive I cannot access it directly within that component
 
Yeah of course, you can do that.
 
could you please give a solution for that it would be really helpfull, I had custom directives and was capturing the x and y but it was then reflecting for all the ngfor elements , if u could give me a solution with (mosuemove) thing I would be really grateful
It would help me a lot
 
Just put this on your div with the #parentContainer:
(mousemove)="documentMouseMove($event)"
 
I was about to ping u i only needed this binding thanks alot i might run into new issues please help thanks alot :)
And the mousemove logic I can put inside this function am I right :)
One more query I had the ngfor element comes into play once I drag and drop in #parentcontainer the ngfor elemnts so that would not be an issue ?
Hey Flix
I had placed the mousemove event in parentcontainer but its not getting triggered
 
2:37 PM
@HostListener('mousedown', ['$event'])
onMousedown(event) {
this.mouse.down = true;
}

@HostListener('mouseup', ['$event'])
onMouseup(event) {
this.mouse.down = false;
}

//@HostListener('flo:mousemove', ['$event'])
documentMouseMove(e: MouseEvent) {
// your move logic
if(!this.mouse.down) { return; }

const container_rect = this.container.getBoundingClientRect();
// relative to container, in px
this.mouse.x = e.clientX - container_rect.left;
this.mouse.y = e.clientY - container_rect.top;
if(!this.will_draw) {
mouseup is getting triggered , i was debugging but it doesn't come to documentMouseMove
Do I need to use changedetectref
 

last day (15 days later) »