Hide html element in subscription - html

Question

I'm using angular at the minute and I've a check-box that I want to make either visible or hidden based on the result of a subscription to an API call.
My problem is that there is a 'delay' in the checkbox becoming invisible (it is default set to visible). I think this is because I am setting the visibility boolean in the subscription.
Essentially, the subscription is called when a mat-chip selection is made. If the API returns anything, the boolean remains true. If nothing is returned, then it is false. Unfortunately, I have to click away from the mat-chip section for the checkbox to then disappear, it is not instant which is what I would like.
HTML:
<div class="btn-div" style="justify-content: space-between">
<mat-checkbox color="primary" [formControl]="drilldownSelect" *ngIf="children">Show sector
breakdown</mat-checkbox>
<button mat-button (click)="showSectors = !showSectors">
<mat-icon *ngIf="!showSectors">unfold_more</mat-icon>
<mat-icon *ngIf="showSectors">unfold_less</mat-icon>
</button>
</div>
<mat-form-field class="btn-div" *ngIf="showSectors">
<mat-chip-list #chipList>
<mat-chip *ngFor="let sector of chosenSectors" [removable]="true" (removed)="removeSector(sector)">
{{ sector.service_code + ": " + sector.service }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input placeholder="Sectors" #sectorInput [formControl]="sectorCtrl" [matAutocomplete]="auto"
[matChipInputFor]="chipList" [matChipInputAddOnBlur]="true">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let sector of filteredSectors | async" [value]="sector" matTooltip={{sector.commodity}}
[matTooltipPosition]="'after'" [matTooltipShowDelay]="500">
{{ sector.service_code + ": " + sector.service }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
TS:
selected(event: MatAutocompleteSelectedEvent): void {
this.testMethod(event.option.value.service_code);
}
testMethod(serviceCode: string) {
this.hasChildren(serviceCode).subscribe((codes) => {
codes.length == 0 ? this.children = false : this.children = true;
});
}
hasChildren(serviceCode: string): Observable<any> {
this.serviceCodeAppend = serviceCode + "_";
console.log(this.serviceCodeAppend);
return this.httpClient.get<any>(`${this.backendService.url}/table?code=like.${this.serviceCodeAppend}`).pipe(
catchError(error => {
this.backendService.handleError(error);
return of({});
})
).pipe(shareReplay(1));
}
The above should contain all the relevant code that makes the checkbox disappear when clicked away from but doesn't work 'instantly'

Answer 1

From the comments, it looks like you're having issues with Angular's change detection not triggering when you want, you can do this manually.
Inject in your constructor
constructor(cdRef: ChangeDetectorRef) { }
then inside your subscribe
this.service.apiCall().subscribe(response => {
// Rest of your code
cdRef.detectChanges();
});