unable to call angular function within jquery

Question

i am using angular full calendar plugin and added a context menu in event render function. context menu is working, but i want to call a angular function when context menu item was clickedy.

i have used following code but "cancelRsvClick" cannot be call inside jquery.

       cancelRsvClick() {
        console.log('cancel---')
      }
      
      eventRender(event, element) {
        
          const contextmenu =  `<div  class="contextMenu ngx-contextmenu dropdown clearfix">
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"
          style="display:block;position:static;margin-bottom:5px;">
              <li data-action = "CancelReservation"  ><a tabindex="-1" role="button"   >Cancel Reservation</a></li>
              <li data-action = "Billing" > <a tabindex="-1"  >Billing</a></li>
          </ul>
      </div>`;
      
        $(element).contextmenu((e) => {
          
          $('.contextMenu').remove();
          const $contextMenu = $(contextmenu).appendTo('body');
          $($contextMenu).css('top', e.pageY);
          $($contextMenu).css('left', e.pageX);
          $($contextMenu).css('position', 'absolute');
          $($contextMenu).css('overflow', 'hidden');
          $($contextMenu).css('z-index', 10000);
      
         
            $($contextMenu).on('click', 'li', (ele) => {
              console.log(ele);
              this.cancelRsvClick();
            });
         
          
        }); 

}

html code

<app-clovatel-rm-sheduler
[header]="header"           
[footer]="footer"
[views]="views"
[defaultView]="defaultView"
[defaultDate]="defaultDate"
[contentHeight]="contentHeight"
[slotWidth]="slotWidth"
[slotDuration]="slotDuration"
[slotLabelFormat]="slotLabelFormat" 
[resourceAreaWidth]="resourceAreaWidth"
[resourceColumns]="resourceColumns"
[resources]="resources"
[restrictedResources]="restrictedResources"
[resourceOrder]="resourceOrder"
[allDayDefault]="allDayDefault"
[events]="events"
[eventOverlap]="eventOverlap"
[eventConstraint]="eventConstraint"
[selectConstraint]="selectConstraint"
(onSelect)="onDaySelect($event, this)"
(onEventClick)="onEventClick($event)"
(onDayRightClick)="onDayRightClick($event)"
(onEventMouseover)="onEventMouseover($event)"
[eventRender]="eventRender"
></app-clovatel-rm-sheduler>

this is how i implement fullcallendar.

@Input() resources: any[];
  
  @Input() events: any[];
  
  @Input() eventRender: Function;

  @Input() dayRender: Function;

  @Input() options: any;

schedule: any;

 constructor(public el: ElementRef, differs: IterableDiffers) {
    this.differ = differs.find([]).create(null);
    this.initialized = false;
  }

ngOnInit() {
    this.config = {
      resources: this.resources,
      resourceColumns: this.resourceColumns,
      resourceAreaWidth: this.resourceAreaWidth,
      resourceLabelText: this.resourceLabelText,    
      views: this.views,
      theme: true,
      header: this.header,
      footer: this.footer,
      selectable: this.selectable,
      droppable: this.droppable,     
      eventRender: this.eventRender,
      dayRender: this.dayRender,
      }
    }

 ngAfterViewChecked() {
    
    if (!this.initialized && this.el.nativeElement.offsetParent) {
      this.initialize();
    }
  }
  
 
  
  initialize() {
    this.schedule = jQuery(this.el.nativeElement.children[0]);
    this.schedule.fullCalendar(this.config);
    this.schedule.fullCalendar('addEventSource', this.events);
    this.initialized = true;
  }
  
    ngDoCheck() {
  
        const changes = this.differ.diff(this.events);

        if (this.schedule && changes) {
          this.schedule.fullCalendar('removeEventSources');
          this.schedule.fullCalendar('addEventSource', this.events);
        }
    }

  ngOnDestroy() {
    
    jQuery(this.el.nativeElement.children[0]).fullCalendar('destroy');
    this.initialized = false;
    this.schedule = null;
  }

it is a methed in angular full callendar which calls when events are rendering in callender when loading initially. — Manoj Sanjeewa
– Manoj Sanjeewa, Commented Mar 3, 2022 at 5:18
I can see that you are passing this function into a component. I am asking you to attach the code where you are using this eventRender in fullcalendar. — zainhassan
– zainhassan, Commented Mar 3, 2022 at 5:34

Ibrahim Azhar Armar · Accepted Answer · 2022-03-03 05:54:59Z

1

If you want to use angular class reference inside jquery onClick event handler try using bind

$($contextMenu).on('click', 'li', (ele) => {
    console.log(ele);
    this.cancelRsvClick();
}).bind(this);

// or 

const $this = this;
$($contextMenu).on('click', 'li', (ele) => {
    console.log(ele);
    $this.cancelRsvClick();
}).bind(this);

// or 

eventRender(event, element) {
    const $this = this;
    const contextmenu =  `
        <div  class="contextMenu ngx-contextmenu dropdown clearfix">
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"
            style="display:block;position:static;margin-bottom:5px;">
                <li data-action = "CancelReservation"  ><a tabindex="-1" role="button"   >Cancel Reservation</a></li>
                <li data-action = "Billing" > <a tabindex="-1"  >Billing</a></li>
            </ul>
        </div>
    `;
$(element).contextmenu((e) => {
    $('.contextMenu').remove();
    const $contextMenu = $(contextmenu).appendTo('body');
    $($contextMenu).css('top', e.pageY);
    $($contextMenu).css('left', e.pageX);
    $($contextMenu).css('position', 'absolute');
    $($contextMenu).css('overflow', 'hidden');
    $($contextMenu).css('z-index', 10000);
    $($contextMenu).on('click', 'li', (ele) => {
        console.log(ele);
        // Chage this to $this 
        $this.cancelRsvClick();
    });
});

answered Mar 3, 2022 at 5:54

Ibrahim Azhar Armar

25.8k36 gold badges136 silver badges213 bronze badges

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

1 Comment

Manoj Sanjeewa Over a year ago

tried with these options still it's not working.

Collectives™ on Stack Overflow

unable to call angular function within jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related