As a coding novice, I'm unsure which language this is. The component.ts file I have contains a function that I need to access outside of ngOnInit(). I tried using this.openDialog(), but it came up as undefined.
I attempted defining the function in JavaScript by creating an object of the component and calling the function:
constructor(public dialog: MatDialog, private datePipe: DatePipe) {
}
ngOnInit(){
var testVar = new testComponent(dia, date);
//dia, date are respective constructor params
}
However, I know this isn't the proper way to do it. Moving onto the Component.ts code:
export class test implements OnInit{
openDialog(){
//this is mat angular dialog
}
ngOnInit(){
document.addEventListener('DOMContentLoaded', function () {
// trying to call the above openDialog here.
});
}
}
I am struggling to call the dialog inside document.addEventListener(). Unfortunately, converting document.addEventListener() is not an option at this time.
Edit 1 Providing more context with additional code:
document.addEventListener('DOMContentLoaded', function () {
var events = []
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
eventLimit: true, // for all non-TimeGrid views
views: {
dayGridMonth: {
eventLimit: 5 // adjust to 6 only for timeGridWeek/timeGridDay
}
},
themeSystem: 'bootstrap',
businessHours: {
daysOfWeek: [1, 2, 3, 4, 5],
startTime: '00:00',
endTime: '24:00',
},
header: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,listView,timeGridWeek,timeGridDay'
},
plugins: [dayGridPlugin, interactionPlugin, listPlugin, bootstrapPlugin, timeGrigPlugin],
eventOverlap: false,
displayEventTime: false,
eventClick: function (info) {
this.curEvnt = info;
console.log(this.curEvnt)
this.openDialog(info.event); //ERROR
}
});
calendar.render();
});
While openDialog is defined and can be called during onInit, implementing the above code results in the error message "this.openDialog is not a function". Any suggestions or guidance would be greatly appreciated.