Triggering Angular Events with jQuery (As Weird As That May Sound) Sometimes, we're going to have to work with a combination of jQuery, Angular, and other libraries and it's important to know how to do so.

One of the things that I enjoy about working with WordPress is the ability to bring in third-party libraries and tools with which to work.

This doesn’t mean they don’t come without their learning curve (they all do, right?), but it’s often fun – albeit frustrating, at times – to incorporate and then manipulate what you’re doing.

As far as third-party technologies go, I’ve seen people bring things in such as the Laravel Illuminate package with WordPress.

Triggering Angular Events with jQuery: Illuminate

And I know, especially in recent years, many have brought in components such as React and Vue.

Triggering Angular Events with jQuery: React

In one such instance, I’ve been doing some work with Angular. And if you’re used to ES6, vanilla JavaScript, or using jQuery, then triggering Angular events with jQuery can seem a bit weird at first.

Triggering Angular Events with jQuery: Angular

But once you understand the markup and how Angular handles its events, it’s not so bad.

Triggering Angular Events with jQuery

Angular works a bit differently than jQuery in how it interacts with the DOM whenever an event happens.

For example, let’s say that using jQuery (or even vanilla JavaScript), we have a page and then within that page is a set of markup that may include a variety of elements. These may be:

  • headings,
  • paragraphs,
  • labels,
  • select elements,
  • and so on.

With jQuery, we’re used to doing something like this:

  1. find the element on which we want to operate either via ID, class name, or some other attribute,
  2. listen for an event,
  3. respond appropriately.

Because of some of the newer features of jQuery, we’re able to define custom events and then setup listeners and handle them appropriately but the general behavior is still the same.

Angular works a bit differently, though.

To keep it straightforward (because remember, I’m just trying to walk through the practical process of triggering Angular events with jQuery), Angular has markup much like any standard HTML document with an exception.

Namely, any Angular-based markup is driven by custom attributes which are prefixed with ng. These tell Angular to listen for certain events when they happen and, when they do, to take action.

For example, if there’s an attribute on an element that looks like this:

Then it means whenever the change event is triggered, Angular needs to fire the appropriate handler and do whatever it needs to do to make sure that the data is handled properly.

But this is where the original question lies: How can we trigger Angular events with jQuery?

A Little Set-Up

Before getting into how to do this, I want to create some sample code that’s based in Angular so we’re on the same page with regard to what I’m talking about:

In short, this is a select element with a number of options. The goal is to two-fold:

  1. programmatically change the value using jQuery,
  2. send the information using native Angular functions.

Straightforward enough, right? Sure, but there are a few things worth noting and I’ll cover those in the next section.

Now To jQuery

Now, let’s say that we’re going to do something with the select elements but we aren’t going to be using Angular. Instead, we’re going to be using jQuery.

But because of the way the solution has been built, Angular waits for a change event to be triggered on the DOM so that the framework can do its thing. But jQuery works differently, right? Instead, it takes the event, uses the subscriber we’ve set up, and then handles it.

This is where our work with triggering Angular events with jQuery comes into play. To be clear, it’s not as simple as calling code via jQuery like this:

Instead, we can set the value with jQuery but then we need to use Angular to trigger the proper event handler. It’s still the change event, but how we do it is different.

In the following code, you’ll see where I’m changing the select element to set its second option as the selected option and then instruct Angular to do its thing by triggering the change event to which the element is bound.

As you can see, there’s not that’s much that’s different; however, rather than calling trigger on the element via jQuery, we use the API provided by Angular. And that’ll take care of it.

Judiciously Using Such Techniques

I’m no Angular expert (nor have I claimed to be), but when it comes to working with a heavily modified custom, third-party solution and the tools I have at my disposal along with the constraints of time and budget, it’s helpful to know how to handle these things.

So perhaps this will be of help to you in a future project.