Accessing functions of angular in javascript/JQuery

Question

Pretty novice in coding, so I have no clue which language it is. I have a component.ts file which contains a function. In ngOnInit(), I have written a part of code in Js cause of dependency. Im trying to access the function written outside ngOnInit(), in this js block.

Tried accessing the function using this.openDialog(), but that just showed error saying its not defined.

Tried defining the function itself in js by creating an object of the component and trying to call the function,

constructor(public dialog: MatDialog, private datePipe: DatePipe) {

  }
ngOnInit(){
var testVar = new testComponent(dia, date);
//dia, date are respective constructor params
}

Pretty sure thats not proper, but tried it.

Component.ts:

export class test implements OnInit{
openDialog(){
//this is mat angular dialog
}
ngOnInit(){

 document.addEventListener('DOMContentLoaded', function () {

// trying to call the above openDialog here. 
});
}

}

Trying to call the dialog inside document.addEventListener(); Converting document.addEventListener(); is not an option. It would help if I can call that dialog inside.

Edit 1 Sharing more code, for info:

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();
});

Open dialog is defined and can be called in onInit, but im trying to implement the above code Error: this.openDialog is not a function

```TypeError: this.openDialog is not a function``` using this. — Arun E.R, Aug 21 '19 at 06:17

Bahador Raghibizadeh · Accepted Answer · 2019-08-21T05:50:22.927

1

you can use from Lifecycle Hooks in angular. After creating a component/directive by calling its constructor, Angular calls the lifecycle hook methods in the following sequence at specific moments:

ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()

please reference to angular doc : Lifecycle Hooks

class MyComponent implements AfterContentInit {
    openDialog(){
        //this is mat angular dialog
    }

    ngAfterContentInit() {
        this.openDialog()
    }
}

edited Aug 21 '19 at 05:50

answered Aug 21 '19 at 05:36

Bahador Raghibizadeh

1,155
11
23

Hi, I think you might have misunderstood my question, Im trying to call an angular function inside that Document.addEventListener function. Which is giving me ```TypeError: this.openDialog is not a function``` error. The function isnt recognized. – Arun E.R Aug 21 '19 at 06:16
if you want access to `document` in angular must be inject document in `cunstractor`. please check this : [link](https://stackoverflow.com/questions/37521298/how-to-inject-document-in-angular-2-service) – Bahador Raghibizadeh Aug 21 '19 at 06:26
It is better to use `Lifecycle Hooks` – Bahador Raghibizadeh Aug 21 '19 at 06:29
and check this: [How do I include a JavaScript script file in Angular and call a function from that script?](https://stackoverflow.com/questions/44817349/how-do-i-include-a-javascript-script-file-in-angular-and-call-a-function-from-th) – Bahador Raghibizadeh Aug 21 '19 at 06:34
Thank you. Will get back if there are issues – Arun E.R Aug 21 '19 at 06:38

Accessing functions of angular in javascript/JQuery

1 Answers1