Angular2 and jQuery: How to call component level function?

Question

Angular2 and jQuery combo is confusing me. Please help! When I invoke a popup dialog, and onApprove case, I want to call Component's level function test(), however, it it causing a run time error:

"TypeError: this.test is not a function"

Any advice is appreciated!

import { Component, OnInit } from '@angular/core';
declare var $: any;

    enter code here

@Component({
  selector: 'app-schedule',
  templateUrl: './schedule.component.html',
  styleUrls: ['./schedule.component.less']
})

export class ScheduleComponent implements OnInit {

  scheduled : boolean;
  constructor() {
    this.scheduled = false;
   }

  ngOnInit() {
  }

  test() {
    console.log('hello');
  }

  deleteConfirmDlg() {
    $('.mini.modal')
      .modal({
        closable  : false,
        onDeny    : function(){
          window.alert('Wait not yet!');
          return false;
        },
        onApprove : function() {
          this.test();
        }
      }).modal('show');
  }
}

Roman C · Accepted Answer · 2017-07-19 22:33:13Z

3

You should use right arrow operator to have access to this

deleteConfirmDlg() {
 $('.mini.modal')
  .modal({
    closable  : false,
    onDeny    : function(){
      window.alert('Wait not yet!');
      return false;
    },
    onApprove : () => {
      this.test();
    }
  }).modal('show');
 }
}

answered Jul 19, 2017 at 22:33

Roman C

1

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

3 Comments

GregL Over a year ago

Once you get used to fat arrow functions, it's hard to ever want to use the function () { ... } form again. So. Much. Unnecessary. Typing. :-)

dmorgan Over a year ago

Yasss! Thank you. I thought the fat arrow was optional. You made my day!

Frederick G. Sandalo Over a year ago

the fat arrow function notation is the one that makes it possible to refer to component variables that we access via "this"

Collectives™ on Stack Overflow

Angular2 and jQuery: How to call component level function?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related