ionic tutorial - ionic events | Ionic - Javascript Events - ionic - ionic development - ionic 2 - ionic framework
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Events:
- Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
- The Ionic JavaScript events are used to facilitate interactivity with the users.
- There are various Ionic events that can be used to add interactivity with users. Following table explains all Ionic events.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Usage:
import { Events } from 'ionic-angular';
// first page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
console.log('User created!')
events.publish('user:created', user, Date.now());
}
// second page (listen for the user created event after function is called)
constructor(public events: Events) {
events.subscribe('user:created', (user, time) => {
// user and time are the same arguments passed in `events.publish(user, time)`
console.log('Welcome', user, 'at', time);
});
}
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
| Event Name | Event Detail |
|---|---|
| on-hold | Called when duration of the touch is more than 500ms. |
| on-tap | Called when duration of the touch is less than 250ms. |
| on-double-tap | Called when there is double tap touch. |
| on-touch | Called immediately when touch begins. |
| on-release | Called when touch ends. |
| on-drag | Called when touch is moved without releasing around the page in any direction. |
| on-drag-up | Called when element is dragged up. |
| on-drag-right | Called when the element is dragged to the right. |
| on-drag-left | Called when the element is dragged to the left. |
| on-drag-down | Called when the element is dragged down. |
| on-swipe | Called when any dragging has high velocity moving in any direction. |
| on-swipe-up | Called when any dragging has high velocity moving up. |
| on-swipe-right | Called when any dragging has high velocity moving to the right. |
| on-swipe-left | Called when any dragging has high velocity moving to the left. |
| on-swipe-down | Called when any dragging has high velocity moving down. |
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Using Events:
- Since all Ionic events can be used the same way we will show you how to use on-touch event and you can just apply the same principles to the other events.
- First, we will create button and assign on-touch event that will call onTouchFunction().
<button on-touch = "onTouchFunction()" class="button">Test</button>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Then we will create that function in our controller scope.
$scope.onTouchFunction = function() {
// Do something...
}
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Now when touch event occurs onTouchFunction() will be called.