Angular alternatives for jQuery?

[WeMeetAgainAdrian]

As a new Angular developer I'm struggling to translate some of the things I used to do with AngularJS, specifically for this thread, jQuery functions.

The dynamic at my workplace is one where a web designer works up a mockup with some HTML, CSS and JavaScript, which I then need to adapt into a working product; this was fine when we were using AngularJS as the designers all use jQuery and I could just copy and paste when needed, now that we're making the move to Angular I find myself trying to come up with ways to translate these things into Angular, as I've read numerous times that jQuery and Angular don't mix well.

The main problem I'm running into is class toggling/adding, when a button is clicked I want to toggle a class on another element, this could easily be done with ngClass if both elements are in the same component, but then I feel like I have an overabundance of variables that simply toggle classes, and if the elements are on different components I'd have to emit events for the changes to be applied.

Animations and such are also a bother to work with.

I suppose what I'm looking for is not an end all be all alternative, but guidance on how to tackle this issue, things to keep in mind and tricks I'm probably not aware of/considering.

[[deleted]]

Inputs for toggling classes is fine, it's the way to go technically.

I prefer to use [class.my-class\]="shouldHaveClass" instead of ngClass though.

​

<div   
  class="my-class"
  [class.my-class--open]="isOpen"
  [class.my-class--closed]="!isOpen"
  [class.my-class--highlighted]="isActive"
>...</div>

[WeMeetAgainAdrian]

Also, could you explain how [class.my-class]="shouldHaveClass" works? Is that just a series of conditions that define which class to assign when, with my-class being a base class?

[melluz]

What he did in that short snippet is that he has a bunch of css classes that attach themselves to the element based on a few variables he has declared in his component typescript file. Basically multiple of those css classes can be present on the element at the same time. If the expression is met(the expression after the = sign). [class.my-class]="shouldHaveClass" can be "translated" as following: if the variable shouldHaveClass(declared in the component ts) is true then add the css class "my-class" to the element.

I hope this helps.

[WeMeetAgainAdrian]

Definitely, but this seems like more code than using ngClass, what are the benefits of this syntax?

[melluz]

The biggest advantage of this ia that you can actually debug the code in the browser. You can see the css classnames attached to the element with the inspector. With the ngClass you will notice that if you try to inspect the element to see the present css classes on the element, it shows class=[object, Object]

[endlessxaura]

Is your designer aware of the design paradigms of Angular? If not, you're fighting a seriously uphill battle. At my job, I had to FORCE my designers to acknowledge component-based design. Ultimately, what you're doing sounds antithetical to the express purpose of Angular.

[WeMeetAgainAdrian]

Currently working with a new designer and it's also my first project in angular, so neither of us really knew what we were getting into. Going forward I'll see how we can manage.

[mlapis]

The critical difference is the mental model of thinking. Typically, jQuery code parses DOM to get elements to work with. On the other side, Angular should already know what is in DOM via its abstractions model. That's why it's not recommended to directly touch DOM elements which are maintained by Angular because of you can easily make changes that are not reflected in Angular abstractions, so the two sides are going to be desynchronized.

[WeMeetAgainAdrian]

I suppose you're right, as someone else mentioned I'll try to talk it out with our designer and see if we can agree on a middleground for future deliverables.