Call TypeScript Method from jquery in angular 2

Question

Im using boostrap-select Dropdown in angular 2 forms with jquery. Onchange jquery event i want to call a Typescript onDropDownChangeChange method. But its not working.

import { Component, OnInit, ViewChild } from '@angular/core';
import { RequestOptions } from '@angular/http';
import 'rxjs/add/observable/throw';
declare var $: JQueryStatic;

export class TestComponent implements OnInit {
  selectedValue: string;

  ngOnInit(): void {

        $(function() {
         var self = this;
          $('.selectpicker').on('change', function(){
            var selectedds = $(this).find('option:selected').val();
            self.onDropDownChangeChange(selectedds); //This is not working
            //this.onChange();
          });

        });  

  }

  onDropDownChangeChange(value: string) {
        this.selectedValue = value;
        this.PopulateGrid(selectedValue);
   }


}

what is the point in using jQuery to listen to that event while you can still use ngModel and/or template syntax to achieve this ? — n00dl3
– n00dl3, Commented May 9, 2017 at 12:26
General rule - every time you get tempted to use jQuery in an Angular/React/Vue app, there's a 99.999% chance there's a better way of doing things. — Joe Clay
– Joe Clay, Commented May 9, 2017 at 12:28

eko · Accepted Answer · 2017-05-09 12:19:23Z

26

You are confusing the scopes. It should be like this:

ngOnInit(): void {

    var self = this;
    $(function() {

          $('.selectpicker').on('change', function(){

              var selectedds = $(this).find('option:selected').val();
              self.onDropDownChangeChange(selectedds); //This is not working
              //this.onChange();

           }); 

    }); 
}

answered May 9, 2017 at 12:19

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

2 Comments

Prabhu Over a year ago

Ya its working fine now. onDropDownChange event Im populating Grid based on dropdown value. code is executing without any error, But Grid is not loading. Can you please help on this?

eko Over a year ago

@PrabhuArumugam I don't know about Grids, I'm sorry : / you can ask another question about that if this one is resolved tho.

Tiep Phan · Accepted Answer · 2017-05-09 12:30:03Z

2

You're missing the context.

And to handle 3rd party library custom event, in some case you need tell Angular run your code after received the event like this.

constructor(private zone: NgZone) {}
ngOnInit(): void {
    var self = this;
    this.zone.run(() => {
      $('.selectpicker').on('change', function(){
        var selectedds = $(this).find('option:selected').val();
        self.onDropDownChangeChange(selectedds);
        //this.onChange();
      }); 
    });

  }

answered May 9, 2017 at 12:30

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Collectives™ on Stack Overflow

Call TypeScript Method from jquery in angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related