Angular jQuery click events should be double click to work

user_1830228 0
Viewed 150

I have a admin panel which implemented with jQuery and Bootstrap and it works fine when I use that out of Angular.

after installing jQuery and Bootstrap on Angular and config them I should double click on items to work

you can see this link as a demo, click on header buttons

SOURCE CODE on github

angular.json:

...
"options": {
  "outputPath": "dist/frontend",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  "styles": [
    "node_modules/bootstrap/dist/css/fonts/icomoon/styles.min.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "node_modules/bootstrap/dist/css/bootstrap_limitless.min.css",

    "node_modules/bootstrap/dist/css/layout.min.css",
    "node_modules/bootstrap/dist/css/components.min.css",
    "node_modules/bootstrap/dist/css/colors.min.css"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
    "src/assets/js/app.js"
  ]
},
...

index.html:

<!doctype html>
<html lang="en" dir="rtl">
<head>
  <meta charset="utf-8">
  <title>salam</title>

  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>
<body>
  <app-root></app-root>
</body>
</html>

packages.json

...
"dependencies": {
  "@angular/animations": "^14.0.0",
  "@angular/common": "^14.0.0",
  "@angular/compiler": "^14.0.0",
  "@angular/core": "^14.0.0",
  "@angular/forms": "^14.0.0",
  "@angular/platform-browser": "^14.0.0",
  "@angular/platform-browser-dynamic": "^14.0.0",
  "@angular/router": "^14.0.0",
  "bootstrap": "^4.6.1",
  "icomoon": "^1.0.0",
  "jquery": "^3.6.0",
  "rxjs": "~7.5.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.11.4"
},
...

simplified app.js as jQuery implementation:

var App = function () {

  var _dropdownSubmenu = function() {

    // All parent levels require .dropdown-toggle class
    $('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').on('click', function(e) {
      e.stopPropagation();
      e.preventDefault();

      // Remove "show" class in all siblings
      $(this).parent().siblings().removeClass('show').find('.show').removeClass('show');

      // Toggle submenu
      $(this).parent().toggleClass('show').children('.dropdown-menu').toggleClass('show');

      // Hide all levels when parent dropdown is closed
      $(this).parents('.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show, .dropdown-submenu.show').removeClass('show');
      });
    });
  };


  return {
    initDropdownSubmenu: function() {
      _dropdownSubmenu();
    },


    // Initialize core
    initCore: function() {
      App.initDropdownSubmenu();
    }
  };
}();


// Initialize module
// ------------------------------

// When content is loaded
document.addEventListener('DOMContentLoaded', function() {
  App.initBeforeLoad();
  App.initCore();
});

// When page is fully loaded
window.addEventListener('load', function() {
  App.initAfterLoad();
});
angular typescript dom-events event-handling jquery
2 Answers

I imagine that you need remove the document.addEventListener('DOMContentLoaded', function() {} and Is in ngAfterViewInit or your components when you need call to this functions

In your component

declare var App

ngAfterViewInit()
{
  App.initBeforeLoad();
  App.initCore();
}

But in general is a bad idea mix Angular and jQuery

user_85581860

You can unbind click event and bind it again to make it work properly:

$('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').unbind('click').bind('click', function (e) {
    // yourCode
});
user_114343730
Related