1

I have a requirement where I need to call a non angular function in angular app. Something like below:

 <div class="actions" onclick="edituser()">
  <app-list></app-list>
</div>

NOTE:

I cannot use (click) here because I want to execute this click function from jquery.

In my .ts file I tried adding following code:

declare var edituser : () => void;
edituser() {
  alert('hiii');
}

But I am getting error:

edituser function is not defined.

Please let me if there is any possible way to do it.

Improve this question
3
  • In what ts file? Did you try adding it as a script in your html? Commented Jan 4, 2018 at 11:58
  • where is your edituser() defined? In which .ts file? Is it available globally? Imho you should really consider avoiding jquery. There is no need for that anymore. Commented Jan 4, 2018 at 11:58
  • edituser() is in the component. Its not at global level. Commented Jan 4, 2018 at 12:09

4 Answers 4

Reset to default
1

Seems like no-one gave you an actual answer to your issue ... Here, let me help : 

<button onclick="window.editUser()">Edit user</button>

In your TS : 

constructor(
  private zone: NgZone
) {}

ngOnInit() {
  this.zone.run(() => {
    window['editUser'] = () => { alert('Hey sexy'); }; // should be TS compliant 
  });
}

ngOnDestroy() {
  delete(window['editUser']); // Good practice to remove it
}

Although using ngZone isn't mandatory, I learnt that you should use it when you want to touch to some code outside of angular's context, so I give you this way of doing and you chose for yourself.

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

7 Comments

Thanks! It looks like a genuine answer let me try it and will get back to you. Thanks once again.
No problem, I would just like to add : this way is good if you only need the function in a single component. If you need it in several components, you should consider moving it into a custom JS file, and import it in your angular-cli.json file
I called mine editUser with a capital U, make you're case sensitive
:) just mind my comment about using it in several components though !
Yes. actually I have configured it as shared component. That I will be using in multiple component.
|
0

You can still use the angular2 (click) handler to trigger a function in your typescript file/component which utilises JQuery.

import { Component } from '@angular/core';

declare var $: any;

@Component({
  selector: 'my-app',
  template: `
            <button (click)="editUser()">Edit user</button>
            <h6 id="user-label">User here</h6>
            `
})
export class AppComponent  {
    editUser() {
        $('#user-label').css( "color", "red" );
    } 
}

Just make sure that you have imported the JQuery library properly into your project. If you're using angular CLI you need to reference it in the 'scripts' array in the .angular-cli.json config file.

Improve this answer

2 Comments

Why would you use jQuery to change color, though? This example encourages bad practice.
@LazarLjubenović That's just an example of how to integrate JQuery into your angular app and use it via a click. That's all. I'm presuming you will be using it for something more serious than a colour change
0

Firstly, combining Angular with jQuery doesn't make much sense. Angular is a platform whose main advantage is that you're not supposed to touch the DOM yourself. jQuery is a library which gives you easy access to DOM. It's a terrible combination.

Now for your troubles. You can and should use (click) output provided to you by Angular. 

<button (click)="handleClick()">
  <app-list></app-list>
</button>

Now in your component code:

handleClick() {
  edituser()
}

However, this assumes that edituser function exists in global scope (in browser, this is equivalent to window.edituser).

What you have written (declare var edituser : () => void) is just a declaration. It helps TypeScript understand that there is a global function which allows you to use it even though it's an externally defined function.

However, if you lie to TypeScript (by promising it there is a function edituser, but it's actually not available), your code will fail at run-time. There's nothing TypeScript can do about that.

And by the way, you should not register click handlers on div HTML elements willy-nilly. They are non-semantic. Users using keyboard to navigate through the website won't be able to focus on this element. Either provide tabindex=0 and role=button (or whatever the role is), or just user the proper button element and then style it differently with CSS.

Improve this answer

1 Comment

Actually I want to use this click in custom jquery datatable column. So (click) wont work there. I need to have onclick only.
0

From what I've tested, you don't have access to out-of-component functions defined on your .ts from your html

According to this issue, you can define <script> tags on your index HTML file if you wish, though I find that to be pretty ugly.

Another way is to define an in-component handler to call a higher-scoped function like so:

function edituser() { alert('hiii'); }

@Component({...})
export class MyComponent {
  //...
  clickHandler(event) {
    edituser();
  }
  //...
}

 <div class="actions" (click)="clickHandler($event)">
   <app-list></app-list>
 </div>

Since you are also looking into calling jQuery from angular, I recommend reading this guide in case you haven't found it already.

Improve this answer

1 Comment

(click) wont be accessible in jquery. I have this html parsed in Jquery data tables custom column

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.