How to call Angular method from jQuery

Question

This question is similar to that one Call Angular Function with Jquery

But I think mine example have small diferences.

On Angular project I have a button:

<button id="button1" #tbName title="tbName" class="btn btn-lg btn-outline-primary" (click)="open(content,tbName.title)">Launch demo modal</button>

On TS file there is a method:

open(content, title) {
    console.log(document.getElementById('button1').getAttribute('title'));
    this.id_desk = document.getElementById('button1').getAttribute('title');
    this.modalService.open(content, { centered: true, container: '#test', ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {

        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {

        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

How should looks like jQuery function that will directly call open(content,title) angular method?

Why not have jQuery just trigger the click? $( "#button1" ).click(); — Vlad274
– Vlad274, Commented Aug 30, 2018 at 13:58
@Vlad274 I did it in that way but finally I want to remove this button and call open() from jQuery function. — Sepcio
– Sepcio, Commented Aug 30, 2018 at 14:02

user4676340 · Accepted Answer · 2018-08-30 14:01:51Z

5

I Strongly advise you to learn to use Angular (& w/o JQuery) instead of mixing the twos.

Now we're on SOF and you asked something. There's a lot wrong with your code, but hey, that's not my project, so I'll just answer.

if you want to access an Angular function with JQuery, bind it to the window like so.

ngOnInit() {
  window['MyComponent']['open'] = this.open.bind(this);
}

Now in JQuery you can access it with

$(...).click(function() {
  window.MyComponent.open('content of the modal', 'title of the modal');
});

answered Aug 30, 2018 at 14:01

user4676340

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Trinh Over a year ago

I Strongly advise you to learn to use Angular (& w/o JQuery) instead of mixing the twos. - true , made my day :))

user4676340 Over a year ago

@ShadowFoOrm not meant to trigger those kind of reactions, but thank you :D

Sepcio Over a year ago

Thanks, I know that but I cannot remove this jQuery. Thanks for your help.

CREM Over a year ago

I'm able to call the function but hoy to trigger the change detection, i need my component to be updated

CREM Over a year ago

I was able to do it with NgZone, as the documentation says, help appreciated

Lazar Ljubenović · Accepted Answer · 2018-08-30 14:04:21Z

In general, you cannot trigger a method defined within and Angular component, because for that you need the instance of the class. Notice how you never call new Component() anywhere in your code? Instead you just specify classes and tie them up with templates and let Angular do the rest.

That said, you can pass the method as a reference to a something global. For example, you can do something like this:

class Component {
  public fn () {} // <-- say you need this function
  constructor () {
    window.fn = this.fn.bind(this)
  }
}

After the constructor is executed, you'll be able to call window.fn() from any file. Note that this approach fails if you expect to have multiple instance of the component. If you do, you need to save the method references in an array or an object.

That said, this is strongly discouraged as it makes code a mess to read.

Collectives™ on Stack Overflow

How to call Angular method from jQuery

2 Answers 2

I Strongly advise you to learn to use Angular (& w/o JQuery) instead of mixing the twos.

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

I Strongly advise you to learn to use Angular (& w/o JQuery) instead of mixing the twos.

5 Comments

Comments

Linked

Related