3

I have a problem when navigate between routes with angular 7, for example... i have this code in my app-component.html

<app-navbar *ngIf="currentUser"></app-navbar>
<router-outlet></router-outlet>
<app-footer *ngIf="currentUser"></app-footer>

Everything in the page works, the <router-outlet></router-outlet> have the main component for the page, this component have inside another component, the <app-leftmenu></app-leftmenu> this is the sidebar; originally this was a html-bootstrap 3 template that i segmented for use in angular cli.

Ok the reason for this question is that the SIDEBAR uses jquery for the basic actions like collapse and expand using the next code:

//
// Sidebar categories
//

// Hide if collapsed by default
$('.category-collapsed').children('.category-content').hide();


// Rotate icon if collapsed by default
$('.category-collapsed').find('[data-action=collapse]').addClass('rotate-180');


// Collapse on click
$('.category-title [data-action=collapse]').click(function (e) {
    e.preventDefault();
    var $categoryCollapse = $(this).parent().parent().parent().nextAll();
    $(this).parents('.category-title').toggleClass('category-collapsed');
    $(this).toggleClass('rotate-180');

    containerHeight(); // adjust page height

    $categoryCollapse.slideToggle(150);
});

But not work in angular, only when i reload once time the component if i navigate to other route the sidebar ignore the jquery, but refreshing the page works... how i resolve this... with no refreshing? Thanks for the help!

Jayesh Goyani
  • 11,008
  • 11
  • 30
  • 50
Victor
  • 115
  • 2
  • 11
  • 1
    have you tried using a pure css solution? The rule of thumb I go by is if you have to include jquery in an angular app, then you aren't using angular correctly. – rhavelka Jan 10 '19 at 17:16
  • The main reason for use a template is because save design time... for this cause we need to use like it is – Victor Jan 10 '19 at 17:41
  • This answer worked for me. Check this out https://stackoverflow.com/a/55675403/6314955 cheers ! – Malith Kuruwita Apr 14 '19 at 12:53

2 Answers2

3

Presumably because at the time your jQuery code is executed $('.category-collapsed'), there is no such element.

Try jQuery.on(), which allows for later binding: https://api.jquery.com/on/

So this

$('.category-title [data-action=collapse]').click(fn)

becomes (untested)

$(document).on('click', '.category-title [data-action=collapse]', fn)
maosmurf
  • 1,858
  • 17
  • 16
  • Ok i convert simple function clicks, but this `$('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').on('click', function(e) {});` how i put that? because search for childs and apply click untl `dropdown-toogle` not directly to `dropdown-menu` – Victor Jan 10 '19 at 18:12
  • `$('.dropdown-menu').find('.dropdown-submenu').not('.disabled').find('.dropdown-toggle').on('click', function(e) {});` could become `$( "body" ).on( "click", '.dropdown-menu .dropdown-submenu:not(.disabled) .dropdown-toggle', function(e) {} );` See also https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on – maosmurf Jan 10 '19 at 21:47
  • I have converted the file until this, but only the add class not work, not apply changes for styles. [App.js](https://stackblitz.com/edit/angular-9tjm5j?file=src%2Fapp%2Fapp.js). Help me to convert the file please. i tried many times but not work (app.js is the modified one and appOriginal is like was in the template).. – Victor Jan 10 '19 at 23:10
1

I would strongly suggest using Angular-Bootstrap instead of a vanilla javascript/jquery solution.

https://ng-bootstrap.github.io/#/home

This library provides a variety of standard UI components - tabbed interfaces, dropdowns, accordion menus etc. all as native Angular components with full TypeScript support.

Stephen R. Smith
  • 3,310
  • 1
  • 25
  • 41
  • The idea its not to give time for standard view like a sidebar, for that i using a template, all the other things created inside will use this library, but the 'skeleton' of the template use jquery – Victor Jan 10 '19 at 18:39