agoncal/agoncal-sample-angular

Collapsible Bootstrap sidebar menu

Opened this issue · 4 comments

In this great article the author shows many different ways to get a collapsible sidebar menu. I've tried implementing it, but it always comes back to a

ReferenceError: $ is not defined

I've tried defining JQuery in several ways, adding the @types/jquery dependencies... I can't make it work. And the little bit of JavaScript needed to collapse the menu doesn't work :

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});

I would study this article by https://toddmotto.com/ng-class-angular-classes. You don't need jQuery.
<div [class.active]="condition"></div>

Definitely do this the Angular way, there is no need to mix-in jQuery for this. Angular is fully capable. If you must use jQuery, you have to tell it how import * as $ from "jquery";

as @jwill124 said. using jQuery on angular apps in not considered to be good practice.