I have a website built with Angular2 and Typescript. I am using the PrimeNG framework for CSS styling. Within my site, I have implemented a jQuery full calendar. My goal is to display a modal when an event on the calendar is clicked.
In the AfterViewInit interface method, I have initialized the fullCalendar object like this:
$("#calendar").fullCalendar({
//..some properties
eventClick: function (calEvent) {
this.display = true;
}
})
The "display" field is part of the component class. Setting it to true should show the modal, but it doesn't work as expected.
However, I also have a button on the same page with onClick handler:
public showDialog() {
this.display = true;
}
Clicking this button successfully shows the modal.
Here is the corresponding HTML code:
<div class="ui-g dashboard" style="margin-top: -18px">
<div class="ui-g-12 ui-md-12">
<div class="card">
<div id="calendar"></div>
</div>
</div>
</div>
<p-dialog header="Godfather I" [(visible)]="display" modal="modal" width="300" responsive="true">
<p>dadsasd</p>
<p-footer>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" pButton icon="fa-close" (click)="display=false" label="No"></button>
<button type="button" pButton icon="fa-check" (click)="display=false" label="Yes"></button>
</div>
</p-footer>
</p-dialog>
<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>
What could be causing the issue?