Callback angular function from jquery event

Question

I am using Angular5 and trying to get the dayClick() event of the fullcalendar.io jquery plugin to callback to the angular component so I can open an angular component dialog populated from the calendar details.

To setup example do this, in console:

ng new pjt
cd pjt
npm install jquery fullcalendar --save

Update to .angular-cli.json to include

[styles]
"../node_modules/fullcalendar/dist/fullcalendar.min.css"

[scripts]
"../node_modules/jquery/dist/jquery.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/fullcalendar/dist/fullcalendar.min.js"

Add to main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

update the app.component.html

<div id='calendar'></div>
<div id="test" (click)="Clicked()" hidden="true"></div>

Add to app.component.ts

import 'fullcalendar';
declare let $:any;

@Component({...})
export class AppComponent {
...

  ngOnInit(){
    $('#calendar').fullCalendar({

      dayClick: function(date, jsEvent, view) {

          //alert('Clicked on: ' + date.format());
          $(this).css('background-color', 'red');

  ***** WANT A BETTER WAY TO CALL NG CLICKED() FUNCTION HERE TO REPLACE THE FOLLOWING 2 LINES *****
          document.getElementById("test").innerText = date.format();
          document.getElementById("test").click();
      }
    });

    $('#calendar').fullCalendar('changeView', 'agendaDay');
  }

  Clicked() {
    alert("Alert from ng func");
  }
}

Then ng server and click the day schedule part of the calendar.

NOTE this is angular 5 so it doesn't look like ng-controller or scope from ng v1 seems to be the right way to do this. I am looking for a cleaner way to call the function without having to have the 'test' div.

Andrew Stalker · Accepted Answer · 2018-02-13 12:45:54Z

1

Based on the fact you want to remove the <div id="test">Replace your function call with an arrow function call:

dayClick: (date, jsEvent, view) => {
    this.clicked(date, jsEvent, view);
}

Modify your clicked event to accept the parameters passed from the full calendar event:

Clicked(date, jsEvent, view) {
// do something with new inputs..
alert("Alert from ng func");
}

Using the arrow function syntax allows this to be bound to your AppComponent. This way you can directly call any function you like defined in the component.

answered Feb 13, 2018 at 12:45

Andrew Stalker

7775 silver badges23 bronze badges

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

Comments

Ulrich Dohou · Accepted Answer · 2017-12-18 17:00:03Z

0

Here a way you can do it. It will be better to use arrow function.

HTML code

<div id="test" #clicktag (click)="Clicked()" hidden="true"></div>

JS code

import { ViewChild, Component, ElementRef } from '@angular/core';

@ViewChild('clicktag') clicktag:ElementRef;

ngOnInit(){
  $('#calendar').fullCalendar({
    dayClick:(date, jsEvent, view) => {
      $(jsEvent.currentTarget).css('background-color', 'red');
      $(this.clicktag.nativeElement).text(date.format());
      $(this.clicktag.nativeElement).trigger( "click" );
    }
  });
  $('#calendar').fullCalendar('changeView', 'agendaDay');
}

You can still take a look at this answer https://stackoverflow.com/a/36639596/6261137. Here they used only angular to trigger click

import { ViewChild, Component, ElementRef, Renderer } from '@angular/core';

@ViewChild('clicktag') clicktag:ElementRef;

constructor(private renderer:Renderer) {}

ngOnInit(){
  let eventClick = new MouseEvent('click', {bubbles: true});
  $('#calendar').fullCalendar({
   dayClick:(date, jsEvent, view) => {
    $(jsEvent.currentTarget).css('background-color', 'red');
    $(this.clicktag.nativeElement).text(date.format());
    this.renderer.invokeElementMethod(this.clicktag.nativeElement, 'dispatchEvent', [eventClick]);
  }
 });
 $('#calendar').fullCalendar('changeView', 'agendaDay');
}

edited Dec 18, 2017 at 17:00

answered Dec 18, 2017 at 16:49

Ulrich Dohou

1,55914 silver badges25 bronze badges

1 Comment

karlmnz Over a year ago

I don't think I made my question clear. Basically I want to remove the <div id='test'> element from my html. Is there are way to directly call the Clicked function from the dayClick event without needing to go through a 'hacky' second html element. e.g. is there a way to get js event to trigger the angular function and pass data as a param ...?

Collectives™ on Stack Overflow

Callback angular function from jquery event

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related