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

You can just call your class functions by using this.

Carsten
– Carsten

2019-08-21 05:54:29 +00:00
Commented Aug 21, 2019 at 5:54 — Carsten
– Carsten, Commented Aug 21, 2019 at 5:54
TypeError: this.openDialog is not a function using this.

Arun E.R
– Arun E.R

2019-08-21 06:17:37 +00:00
Commented Aug 21, 2019 at 6:17 — Arun E.R
– Arun E.R, Commented Aug 21, 2019 at 6:17
Remove the document.addEventListener.... nonsense.

Carsten
– Carsten

2019-08-21 06:18:24 +00:00
Commented Aug 21, 2019 at 6:18 — Carsten
– Carsten, Commented Aug 21, 2019 at 6:18
Please check the updated question

Arun E.R
– Arun E.R

2019-08-21 06:21:32 +00:00
Commented Aug 21, 2019 at 6:21 — Arun E.R
– Arun E.R, Commented Aug 21, 2019 at 6:21
Only this part of the code is not in angular.

Arun E.R
– Arun E.R

2019-08-21 06:24:05 +00:00
Commented Aug 21, 2019 at 6:24 — Arun E.R
– Arun E.R, Commented Aug 21, 2019 at 6:24

Bahador Raghibizadeh · Accepted Answer · 2019-08-21 05:50:22Z

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, 2019 at 5:50

answered Aug 21, 2019 at 5:36

Bahador Raghibizadeh

1,29214 silver badges27 bronze badges

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

5 Comments

Arun E.R Over a year ago

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.

Bahador Raghibizadeh Over a year ago

if you want access to document in angular must be inject document in cunstractor. please check this : link

Bahador Raghibizadeh Over a year ago

It is better to use Lifecycle Hooks

Bahador Raghibizadeh Over a year ago

and check this: How do I include a JavaScript script file in Angular and call a function from that script?

Arun E.R Over a year ago

Thank you. Will get back if there are issues

Collectives™ on Stack Overflow

Accessing functions of angular in javascript/JQuery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related