I am on Angular/Infragistics 12.0.3.

I am attempting to force a component reload on my scenario-details (parent) component based on changes made to the mappings (child) component.

I am emitting change events on the child component as below:

@Output() reportChanges = new EventEmitter<string>();

  async deleteMapping(mapping:scenarioDesignFacility) {
    let response:any, confirmation:boolean = confirm(`Delete mapping ${mapping.design} for ${mapping.facility}?`);
    if (confirmation) {
      response = await this.scenarioService.deleteDesignFacilityMapping(mapping.id).toPromise();
      if (response == 'OK') {
        this.dfMappings.splice(this.dfMappings.findIndex(m => m.id == mapping.id), 1);
        this.dfMappingsList.markForCheck();
        console.log(`Successfully deleted mapping ${mapping.design} for ${mapping.facility}!`);
        this.reportChanges.emit('mapping deleted');
      }
    }
  };

  async updateDesignFacilityMapping(mapping:scenarioDesignFacility) {
    let response:any = await this.scenarioService.updateDesignFacilityMapping(mapping).toPromise();
    if (response.statusCode == 200) {
      console.log(`Mapping ${mapping.design} for ${mapping.facility} successfully updated!`);
      this.reportChanges.emit('mapping updated');
    }
    else { console.log(`Failed to update mapping ${mapping.design} for ${mapping.facility}: `, response); }
  };

  async createDesignFacilityMapping() {
    let response:any = await this.scenarioService.createDesignFacilityMapping(this.newDf).toPromise();
    if (response.statusCode == 200) {
      console.log(`Mapping ${this.newDf.design} for ${this.newDf.facility} successfully created!`);
      this.dfMappings.push(this.newDf);
      this.dfMappings.sort((a, b) => {
        if (a.facility !== b.facility) { return a.facility.replace('2', '02') < b.facility.replace('2', '02') ? -1 : a.facility.replace('2', '02') > b.facility.replace('2', '02') ? 1 : 0; }
        else { return a.design < b.design ? -1 : a.design > b.design ? 1 : 0; }
      });
      this.dfMappingsList.markForCheck();
      this.reportChanges.emit('mapping created');
    }
    else { console.log(`Failed to create mapping ${this.newDf.design} for ${this.newDf.facility}: `, response); }
  };

I am attempting to listen and respond by reloading location as below:

• html: 

  <igx-tabs #scenNav [tabAlignment]="'justify'" *ngIf="scenario && scenario.name !== undefined && workweeks.length> 0" (tabItemSelected)="itemSelected()" [style.display]="isLoading ? 'none' : 'block'">
      <igx-tab-item>
          <igx-tab-header class="bg-primary text-white"><span igxTabHeaderLabel>Design Facility Mappings</span></igx-tab-header>
          <igx-tab-content>
              <app-design-facility [id]="scenario.id" [scenario]="scenario" (reportChanges)="changeNotification($event)"></app-design-facility>
          </igx-tab-content>
      </igx-tab-item>
  </igx-tabs>
  

• ts: 

    changeNotification(e:any) { this.dfChanges = true; };
  
    itemSelected() { if (this.dfChanges) { location.reload(); } }
  
  

I am not getting any information from either tabItemSelected or tabItemDeselected events on igx-tabs. The documentation isn't clear on where these events should be emitted/listened to. I have tried them on both the igx-tabs enclosure (container for igx-tabs-item types) and directly on the igx-tab-item objects without positive results.

It is critical that the scenario-details component reload with mapping changes since every change (except the private flag) directly affects the visible data (private hides the mapping's existence from other users who are not admins in the design component).