Tips for capturing all mobile events in Angular

Trying to capture all mobile events like touch and swipe, I have added event listeners at the document level:

document.addEventListener('tap', trackTouchActivity, false);
document.addEventListener('swipe', trackTouchActivity, false);

function trackTouchActivity(event) {
    // handle any touch activity
}

While this setup works on the initial page of the angular app, it fails to function on subsequent pages or controllers.

My attempt to resolve this involved adding the code to $rootScope:

app.run(function($rootScope){
    document.addEventListener('swipe', trackTouchActivity, false);
    document.addEventListener('tap', trackTouchActivity, false);

    function trackTouchActivity(event) {
        $rootScope.$apply(function(){
            // handle any touch activity
            // set some variable to true
        });
    }
});

Being new to angular, I may be overlooking something. How can I ensure event listening functionality throughout the app?

Answer №1

If you want to detect touch(start) on Component X, follow this code snippet:

@Component({
host: {
'(document:touchstart)': 'onClick($event)',
 },
})

class SomeComponent() {
constructor(private _eref: ElementRef) { }


onClick(event) {
if (!this._eref.nativeElement.contains(event.target)) 
 doSomething();
  }
}

To handle other mobile events, I recommend using the NgTouch package. It provides tools for listening to a variety of mobile behaviors.

Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript form validation eliminates input data

I recently started using the JavaScript library for client-side form validation called Bouncer. It has been working really well, but I have encountered a peculiar behavior that I need help understanding. My form has two submit buttons with different value ...

Issue encountered: Vue js and d3 data visualization error - "d3 is not defined"

I am attempting to showcase a .json file as a treemap by using npm run dev. I thought I had everything set up correctly but it appears that an issue is arising. Below is my App.vue code: <template> <div id="app"> <title> { ...

Tips for capturing the Three.js model file content and assigning it to a variable

After exporting a model from Blender to Three.js, the resulting file contains JSON data. There are two methods I know of for loading this model: var loader = new THREE.JSONLoader() var material = new THREE.MeshPhongMaterial({color: '#8080a0'}) ...

The Bootstrap Navbar appears hidden beneath other elements on mobile devices

While using bootstrap to style my header contents, I encountered a strange issue. The navbar that appears after clicking on the hamburger menu is displaying behind all the components. Even though I've set the z-index to the maximum value, it still doe ...

Transform ISO-8859-1 encoding into UTF-8

Recently, I encountered an issue while sending a HTTP request using jQuery's ajax. The server, unfortunately, returns the response in ISO-8859-1 format while my page is set to UTF-8. This discrepancy causes some characters to become unreadable. How ...

The back button functionality in Android cannot be altered or overridden using JavaScript

Hey everyone, I'm currently in the process of developing a mobile application using phonegap. I'm facing an issue where I want to disable the functionality of the back button from navigating to the previous page. I simply want it to do nothing or ...

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

Nested Add and Remove using Jquery

I'm looking for assistance with implementing add/remove functionality for both top-level and sublists, which should result in a serialized output. Can anyone provide guidance on how to achieve this? For example: Add Question Question 1 | Delete An ...

Rewrite: "Rewriting URL POST requests in Node.js

Within my JavaScript file, I have this function: exports.authentication = function(req, res) { // .. // user validation // .. res.redirect('/login'); }; I'm looking to modify all POST requests to a different path, such as / ...

Enhance the efficiency of DataTable by optimizing cell class modifications

I have been very pleased with the performance of jquery DataTables, but I have encountered a situation where I need to optimize it further. Specifically, I am updating the class of a cell based on its data. Currently, I am achieving this by using the ren ...

ng-options retrieve the referenced document and use its specified field as the value for populating the dropdown

Currently, I am utilizing meteor+angular to work on a project. The code below iterates through each document in the items collection. When a document with meal == true is encountered, the code then loops through the associated combos to generate dropdown m ...

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

The issue of Ejs partial header and footer file only functioning in one file and not the other (both at the same directory level)

I'm in the process of setting up a view page for a post on the main page of a website. Both pages share the same header and footer files, located at the same directory level. However, while one page is functioning correctly, the other is not. The erro ...

Encountered Error: Failed to inject additional dependencies

Attempting to manage my views using state (ui.router) has hit a roadblock. The addition of extra dependencies to the module is triggering the following error: Uncaught Error: [$injector:modulerr] This error is causing my states to break. var MyApp = a ...

What could be the reason for my ng-grid edit template failing to close when blurred?

I am currently working with an ng-grid table that has an editable cell, and I have implemented an Angular UI datepicker for this cell. { width: "80px", field: "EstInvDate", displayName: "Inv Date", enableCellEdit: true, editableCellTemplate ...

Utilize JavaScript, MySQL, and PHP to input data into a database

My JS function is supposed to make an ajax request, but for some reason it's not working. I've checked the URL in an alert and all variables are declared. var request = new XMLHttpRequest(); var url = "ajax_js/q_ajax.php?q="+ques+ ...

"Performance issues with Three.js due to too many textures in 200

I have been experimenting with three.js for a few months now. Recently, I began working on a project involving a 3D webgl product catalogue where we store base64 images in the browser's indexeddb and create the catalogue upon app load. The issue arise ...

Warning: Attempting to destructure the property 'name' from 'req.body', which is undefined, is causing a TypeError

Currently, I am diving into the world of MERN Stack web development and running into a unique issue. When using Postmate to input data from the body to the database, everything works smoothly when done from the server.js file. However, when attempting the ...

Having trouble pinpointing the issue with my JavaScript code

Recently, I've been experimenting with JavaScript code snippets and after making some edits to one particular sample, I can't seem to figure out why it's not working. Everything appears correct to me, but here is the code snippet (JSFiddle) ...

Having trouble connecting DB and D3 using PHP. Struggling to follow D3noob's tutorial to completion

First and foremost, I want to express my gratitude to the amazing community here for all that I have learned. However, I'm currently facing some difficulties in finding the solution I need. I've encountered issues while trying to follow the inst ...