I am building a component in Angular2 and I want to use the (tap) event as my own. When I try, my app mentions using hammer.js - but I want to use my own tap, not the one provided by hammer.js - is there a way to do that?
(tap)='onTap($event)'
Today I found a solution to this:
https://medium.com/#TheLarkInn/creating-custom-dom-events-in-angular2-f326d348dc8b
https://medium.com/#TheLarkInn/hacking-angular2-binding-multiple-dom-events-f781b14ef676
Related
I'm trying to some kind of pattern for my web app,
so if the user swipes up and left, respectively it will trigger an event
How to do that with hammer js? It seems like using recognizeWith() API but I don't quite understand the usage.
I was trying to do the exact same thing recently with Hammer.js but found it way more difficult than it should be. I ended up writing a library myself to do exactly this.
https://www.npmjs.com/package/swipey.js
The listener will fire a callback when the user does a valid swipe. The callback will receive an object with some details such as "direction", which in your case would be "up-left"
I've a simple list made of mat-card. I would like to highlight the mat-card when dragging a file over and do something on the file drop, but I have two main issues:
Sometimes, when dragging too fast, the status of the mat-card is not correctly updated. so in some cases I have multiple cards highligthed.
The e.preventDefault() on drop event does nothing. The file is open in the browser, which is not the expected behaviour.
I tried so many things, even manually add/remove event listeners, but nothing worked. Hope someone will help :)
Here you can find a demo made in stackblitz so it can be easier to debug:
https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted
Update:
Using Angular v5 and Angular Material 2
After some poking around, the dragover event needs to be prevented as well as the drop event in order to stop the browser from opening the file. To fix the class being applied multiple times, I fixed this by using ngClass instead of the ngIf and it seems to work more consistently. Check out this stackblitz for a demo.
For the first issue, this is because of Angular lifecycle that isn't fast enough. Either you stop using Angular's context to update your elements, or you find another way of notifying the user that he is above the application.
For the second issue, add an host listener to the window:dragover event to prevent the default :
#HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) {
event.preventDefault();
}
Stackblitz
How to correctly use click and touchstart events together in VUE2?
Is thevue-router and its
<router-link to="/tap">tap</router-link>
ensure it by default?
If not, how to smartly add touchstart event to existing VUE2 SPA application, who uses vue-router with router-link tags?
Touch events trigger a normal click. This is the browser's default behaviour and is not closely related to the Vue.
So we can listen to touches by #click or by using router-link that actually also uses #click.
I'm just starting out in Angular, and I get the MVC model for organizing data architecturally, but I'm not sure about building custom UI elements without using jQuery (or vanilla js).
For example, I want to build a custom slider, sort of like a progress bar that a user can click (or touch) and drag to change the value. Is angular built for that, or would it require a hack-y solution? Would it be some combination of mouseover, mousedown, mousemove, mouseup events?
AngularJS has its own lite version of jQuery. The document is here: http://docs.angularjs.org/api/angular.element
It is not supposed to handle heavy DOM manipulation and it will not support such thing in the future. If you want to build a custom slider, there is a plug-in called angular-ui: http://angular-ui.github.io/
However, Angular-ui uses jQuery as well. I also notice they don't have a built-in slider component, so my suggestion is that first you should use angular.element, if this cannot satisfy whatever you need, use jQuery.
I would like to know if the flipview control of the winjs library (win8) has got an event, which it called when the page turns, no matter if by keyboard or by mouseclick or swiping?
I was Googling for it, but i could just find other methods which does not fire at the right moment.
is there maybe a way you can make such events?
You should use the onpagechanged event. This will fire when the user switches pages no matter the mechanism.
Try using the pagecompleted event. Used it in one of my apps and it worked. Hope it works for you too :)