5

The basic premise of the problem is as follows:

I have a component with various (custom) inputs, when any of these input values change I do a HTTP call to an API endpoint to re-calculate what my audience reach is i.e. it's a Campaign system and as the user defines the audience demographic the audience 'reach' changes.

I trigger the call using ngModelChanges and this works very well.

However, my problem is when the component loads with existing data (from a previous save) it populates the inputs which causes ngModelChange to fire thereby causing my HTTP call to fire multiple times on page load.

Sample HTML:

<app-custom-input
        id="age-from"
        name="age-from"
        [(ngModel)]="audienceModel.ageFrom"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>
<app-custom-input
        id="age-to"
        name="age-to"
        [(ngModel)]="audienceModel.ageTo"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>

Note: my custom inputs do implement ControlValueAccessor

.ts file:

calcReach() {
    if (!this.loading$.getValue()) {
      const filters = {
        ...this.audienceModel,
        audienceFileId: this.campaignService.campaign.audienceFileId
      };
      this.calcAudienceReach$ = this.campaignService.calcAudienceReach(filters).subscribe((reach: number) => {
        console.log('calc audience reach: ', reach);
      });
    }
  }

As can be seen I did try using a loading indicator that I set to false at the end of my ngOnInit(), but the calls triggered by ngModelChange all happen after (or before?) OnInit.

I have an abstract component that my component implements where the loading indicator is defined as:

public loading$: BehaviorSubject<boolean> = new BehaviorSubject(true);

i.e. it gets set up with an initial value of true (in the abstract component) and only changed to false at the end of ngOnInit (in the actual component).

0 Answers0