Accessing class method from console in angular typescript

Question

I need to call the class method through console which intern accesses the class variable and then it reflects on the HTML. I Referred Call a service function from browser console in angular 6 but I was unable to access this keyword.

export class AppComponent {
    title = 'calender-app';
    timeslot: any =  [];

    constructor(){
      window['plotEvent'] = this.plotEvent;
    }
  
    plotEvent(events: Calender[]): void{
    // not able to access this.timeslot when I call it from browser's console.
    this.timeslot.push(...events); // getting error as can't read property timeslot of undefined.
    }

Show us what you have tried. The link you have posted should work. — kai, Jul 21 '20 at 06:14

Ahron M. Galitzky · Accepted Answer · 2020-07-21T06:33:38.883

4

I assume that you are trying to access a typescript method on the browsers console.

You can make the entire angular component.ts's variables, methods etc. available to access in the browser console by adding OnInit or in the constructor the following:

Let's say you are trying to access a method within the AppComponent, you go.

OnInit() {
    window['AppComponent'] = this;
}

Or:

constructor() {
    window['AppComponent'] = this;
}

The same works in services too.

Then in the console you go: AppComponent.myMethod()

edited Jul 21 '20 at 06:33

answered Jul 21 '20 at 06:27

Ahron M. Galitzky

2,219
2
13
25

This updated the timeslot but the HTML did not reflect the changes. – Akash Mane Jul 21 '20 at 06:44
I don't think that you can refresh the dom with new content. once it was loaded by accessing the console. – Ahron M. Galitzky Jul 21 '20 at 06:47
You can try in `OnInit` to call `this.plot(events)` to see the HTML changes – Ahron M. Galitzky Jul 21 '20 at 06:50

Accessing class method from console in angular typescript

1 Answers1

Linked