use angular2 component property at init jquery function












0















i am developing web app by using angular2. i am also using jquery auto complete. i make request to remote server and get completion data but server address is hardcoded in auto complete function. i tried to use component property but i could not pass value as parameter to jquery init function.



ngOninit() {
this.initJquery();
}
private initJQuery() {
setTimeout(() => {

$(() => {
$("#city-area").autocomplete({
source: function (request, response) {
$.ajax({
url: "***how to use component value here?***",
...
}).data("ui-autocomplete")._renderItem = function (ul, item) {

};
});
}, 0);
}


how can i use component value in jquery function?










share|improve this question





























    0















    i am developing web app by using angular2. i am also using jquery auto complete. i make request to remote server and get completion data but server address is hardcoded in auto complete function. i tried to use component property but i could not pass value as parameter to jquery init function.



    ngOninit() {
    this.initJquery();
    }
    private initJQuery() {
    setTimeout(() => {

    $(() => {
    $("#city-area").autocomplete({
    source: function (request, response) {
    $.ajax({
    url: "***how to use component value here?***",
    ...
    }).data("ui-autocomplete")._renderItem = function (ul, item) {

    };
    });
    }, 0);
    }


    how can i use component value in jquery function?










    share|improve this question



























      0












      0








      0








      i am developing web app by using angular2. i am also using jquery auto complete. i make request to remote server and get completion data but server address is hardcoded in auto complete function. i tried to use component property but i could not pass value as parameter to jquery init function.



      ngOninit() {
      this.initJquery();
      }
      private initJQuery() {
      setTimeout(() => {

      $(() => {
      $("#city-area").autocomplete({
      source: function (request, response) {
      $.ajax({
      url: "***how to use component value here?***",
      ...
      }).data("ui-autocomplete")._renderItem = function (ul, item) {

      };
      });
      }, 0);
      }


      how can i use component value in jquery function?










      share|improve this question
















      i am developing web app by using angular2. i am also using jquery auto complete. i make request to remote server and get completion data but server address is hardcoded in auto complete function. i tried to use component property but i could not pass value as parameter to jquery init function.



      ngOninit() {
      this.initJquery();
      }
      private initJQuery() {
      setTimeout(() => {

      $(() => {
      $("#city-area").autocomplete({
      source: function (request, response) {
      $.ajax({
      url: "***how to use component value here?***",
      ...
      }).data("ui-autocomplete")._renderItem = function (ul, item) {

      };
      });
      }, 0);
      }


      how can i use component value in jquery function?







      angular typescript parameter-passing jquery-ui-autocomplete






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jan 20 at 11:59









      PierreDuc

      29.9k55878




      29.9k55878










      asked Jan 18 '17 at 14:02









      Cuma KilincCuma Kilinc

      104




      104
























          1 Answer
          1






          active

          oldest

          votes


















          0














          That's some funky code. Anyways, you should never use the function keyword inside a TypeScript class. This will mess up the this context. Always use the arrow function notation:



          ngAfterViewInit() {
          this.initJquery();
          }

          private initJQuery() {
          $("#city-area").autocomplete({
          source: (request, response) => {
          $.ajax({
          url: this.url
          }).data("ui-autocomplete")._renderItem = (ul, item) => {};
          });
          }





          share|improve this answer


























          • no sir, this refers to jquery staff

            – Cuma Kilinc
            Jan 18 '17 at 14:23











          • if you use function, yes.. then it does. Not if you use the () => {} notation. Can you add where you use this code inside the class?

            – PierreDuc
            Jan 18 '17 at 14:25













          • hey pierre, I edited question.

            – Cuma Kilinc
            Jan 19 '17 at 6:40











          • My answer remains the same, use the arrow notation, and not function

            – PierreDuc
            Jan 19 '17 at 6:51











          • thanks pierre, it works...

            – Cuma Kilinc
            Jan 19 '17 at 10:39











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41721459%2fuse-angular2-component-property-at-init-jquery-function%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          That's some funky code. Anyways, you should never use the function keyword inside a TypeScript class. This will mess up the this context. Always use the arrow function notation:



          ngAfterViewInit() {
          this.initJquery();
          }

          private initJQuery() {
          $("#city-area").autocomplete({
          source: (request, response) => {
          $.ajax({
          url: this.url
          }).data("ui-autocomplete")._renderItem = (ul, item) => {};
          });
          }





          share|improve this answer


























          • no sir, this refers to jquery staff

            – Cuma Kilinc
            Jan 18 '17 at 14:23











          • if you use function, yes.. then it does. Not if you use the () => {} notation. Can you add where you use this code inside the class?

            – PierreDuc
            Jan 18 '17 at 14:25













          • hey pierre, I edited question.

            – Cuma Kilinc
            Jan 19 '17 at 6:40











          • My answer remains the same, use the arrow notation, and not function

            – PierreDuc
            Jan 19 '17 at 6:51











          • thanks pierre, it works...

            – Cuma Kilinc
            Jan 19 '17 at 10:39
















          0














          That's some funky code. Anyways, you should never use the function keyword inside a TypeScript class. This will mess up the this context. Always use the arrow function notation:



          ngAfterViewInit() {
          this.initJquery();
          }

          private initJQuery() {
          $("#city-area").autocomplete({
          source: (request, response) => {
          $.ajax({
          url: this.url
          }).data("ui-autocomplete")._renderItem = (ul, item) => {};
          });
          }





          share|improve this answer


























          • no sir, this refers to jquery staff

            – Cuma Kilinc
            Jan 18 '17 at 14:23











          • if you use function, yes.. then it does. Not if you use the () => {} notation. Can you add where you use this code inside the class?

            – PierreDuc
            Jan 18 '17 at 14:25













          • hey pierre, I edited question.

            – Cuma Kilinc
            Jan 19 '17 at 6:40











          • My answer remains the same, use the arrow notation, and not function

            – PierreDuc
            Jan 19 '17 at 6:51











          • thanks pierre, it works...

            – Cuma Kilinc
            Jan 19 '17 at 10:39














          0












          0








          0







          That's some funky code. Anyways, you should never use the function keyword inside a TypeScript class. This will mess up the this context. Always use the arrow function notation:



          ngAfterViewInit() {
          this.initJquery();
          }

          private initJQuery() {
          $("#city-area").autocomplete({
          source: (request, response) => {
          $.ajax({
          url: this.url
          }).data("ui-autocomplete")._renderItem = (ul, item) => {};
          });
          }





          share|improve this answer















          That's some funky code. Anyways, you should never use the function keyword inside a TypeScript class. This will mess up the this context. Always use the arrow function notation:



          ngAfterViewInit() {
          this.initJquery();
          }

          private initJQuery() {
          $("#city-area").autocomplete({
          source: (request, response) => {
          $.ajax({
          url: this.url
          }).data("ui-autocomplete")._renderItem = (ul, item) => {};
          });
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 19 '17 at 10:50

























          answered Jan 18 '17 at 14:20









          PierreDucPierreDuc

          29.9k55878




          29.9k55878













          • no sir, this refers to jquery staff

            – Cuma Kilinc
            Jan 18 '17 at 14:23











          • if you use function, yes.. then it does. Not if you use the () => {} notation. Can you add where you use this code inside the class?

            – PierreDuc
            Jan 18 '17 at 14:25













          • hey pierre, I edited question.

            – Cuma Kilinc
            Jan 19 '17 at 6:40











          • My answer remains the same, use the arrow notation, and not function

            – PierreDuc
            Jan 19 '17 at 6:51











          • thanks pierre, it works...

            – Cuma Kilinc
            Jan 19 '17 at 10:39



















          • no sir, this refers to jquery staff

            – Cuma Kilinc
            Jan 18 '17 at 14:23











          • if you use function, yes.. then it does. Not if you use the () => {} notation. Can you add where you use this code inside the class?

            – PierreDuc
            Jan 18 '17 at 14:25













          • hey pierre, I edited question.

            – Cuma Kilinc
            Jan 19 '17 at 6:40











          • My answer remains the same, use the arrow notation, and not function

            – PierreDuc
            Jan 19 '17 at 6:51











          • thanks pierre, it works...

            – Cuma Kilinc
            Jan 19 '17 at 10:39

















          no sir, this refers to jquery staff

          – Cuma Kilinc
          Jan 18 '17 at 14:23





          no sir, this refers to jquery staff

          – Cuma Kilinc
          Jan 18 '17 at 14:23













          if you use function, yes.. then it does. Not if you use the () => {} notation. Can you add where you use this code inside the class?

          – PierreDuc
          Jan 18 '17 at 14:25







          if you use function, yes.. then it does. Not if you use the () => {} notation. Can you add where you use this code inside the class?

          – PierreDuc
          Jan 18 '17 at 14:25















          hey pierre, I edited question.

          – Cuma Kilinc
          Jan 19 '17 at 6:40





          hey pierre, I edited question.

          – Cuma Kilinc
          Jan 19 '17 at 6:40













          My answer remains the same, use the arrow notation, and not function

          – PierreDuc
          Jan 19 '17 at 6:51





          My answer remains the same, use the arrow notation, and not function

          – PierreDuc
          Jan 19 '17 at 6:51













          thanks pierre, it works...

          – Cuma Kilinc
          Jan 19 '17 at 10:39





          thanks pierre, it works...

          – Cuma Kilinc
          Jan 19 '17 at 10:39




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f41721459%2fuse-angular2-component-property-at-init-jquery-function%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Liquibase includeAll doesn't find base path

          How to use setInterval in EJS file?

          Petrus Granier-Deferre