Angular Variable not change after update from response data

Question

Value of variable is not updated on server response.

In interview.component.ts

export class InterviewModeComponent implements OnInit {
interViewAwaits: Interview[] = [];
awaitLoading: boolean = true;

constructor(private translate: TranslateService,
            private interviewModeService: InterviewModeService) {
}

ngOnInit() {
    this.getAwaitInterviews();
}

getAwaitInterviews() {
    this.interviewModeService.getInterviews(1).subscribe(
        res => {
            console.log(res);
            this.interViewAwaits = res.data;
            this.awaitLoading = false;
        }, error => {
            console.log(error);
        }
    )
}

In inverview.component.html

<div class="kt-widget4" *ngIf="awaitLoading == true">
    <div class="kt-widget4__item">
        <div class="kt-spinner kt-spinner--sm kt-spinner--brand"></div>
    </div>
</div>
<div class="kt-widget4" *ngIf="awaitLoading == false">
    <div class="kt-widget4__item" *ngFor="let item of interViewAwaits">
         <div>{{item.first_name}}</div>
    </div>
</div>
<button (click)="getAwaitInterviews">Get</button>

In console log, I can see data response from server but the variable awaitLoading never change to false after I set it to false, but if I click button to call function getAwaiInterviews() again, it works. What happen here? I don't know what to do.I sorry for my bad English. I'm native.

Answer 1

I have created a Stackblitz for your example here and the value of awailtLoading is getting set to false there.

Also, a little correction in your code:

<button (click)="getAwaitInterviews()">Get</button>