nisaanwaarr
Posts: 12
Joined: Tue Oct 04, 2022 9:12 pm

Trigger ngOnChanges Manuualy.

Hi, I want to trigger ngOnChanges manually, (Reason: When I change input variable of a component in the component itself i want to run the ngOnChanges Function again, but the change doesn't get picked up.)
Now i am making a SimpleChange Object myself to pass it to ngOnChanges. But cant seem to find the right way to do it.
Any suggestions?
This is how i am trying to trigger it :

Code: Select all

            this.ngOnChanges({"REFLOW":{previousValue: true,currentValue:false,firstChange:false}, isFirstChange():false});
Error:
Property 'isFirstChange' is missing in type '{ previousValue: true; currentValue: false; firstChange: false; }' but required in type 'SimpleChange'.ts(2741)


Signature of ngOnChanges:

Code: Select all

  ngOnChanges(changes: SimpleChanges) 
nisaanwaarr
Posts: 12
Joined: Tue Oct 04, 2022 9:12 pm

Re: Trigger ngOnChanges Manuualy.

any update?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Trigger ngOnChanges Manuualy.

Hi,
Thanks for your question,

You can change Highcharts chart chartOptions options in Angular hookups such as ngOnChanges().

Code: Select all

  ngOnChanges(changes: SimpleChanges) {
    this.updateFlag = false;

    this.chartOptions = {
      title: {
        text: this.title.text,
      },
    };

    if (!changes.title.firstChange) {
      console.log(changes.title.currentValue);
    }
  }

This hook works in such a way that it only reads with the data entered by @Input.

As far as your problem is concerned there is too little information to diagnose. You can either recreate the case in the online code editor or describe it in more detail, although hopefully, the example below will suggest you how to use Angular hooks in Highcharts.
ngOnChanges() hook is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
.

Also, you can see how to build Angular projects with the official Highcharts Angular wrapper.
https://github.com/highcharts/highchart ... t-instance

Live demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

if you have more questions do not hesitate to ask,
Best regards.
Sebastian Hajdus
Highcharts Developer
nisaanwaarr
Posts: 12
Joined: Tue Oct 04, 2022 9:12 pm

Re: Trigger ngOnChanges Manuualy.

Let me add more detail, my chart component takes @Input variable

Code: Select all

  @Input() REFLOW: boolean = false;
Now my requirement is if i change ithis variable inside the component, it should call ngOnChanges. Which it is not calling. So i tried to manually calling ngOnChanges by below function call.

Code: Select all

            this.ngOnChanges({"REFLOW":{previousValue: true,currentValue:false,firstChange:false}, isFirstChange():false});
I need to know what i am doing wrong here.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Trigger ngOnChanges Manuualy.

Hi,

Unfortunately, I don't see a connection between our library anymore and the topic, your problem is more of the nature of understanding how Angular hookups work.

I recommend the official Angular documentation:
https://angular.io/guide/lifecycle-hooks
https://angular.io/guide/inputs-outputs

Feel free to ask questions about our library.
Best regards
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”