Angular variable is not updating when request if finished

Question

I have my html file game-page-details.component.html:

<ngx-shimmer-loading *ngIf="!apkDto else appCover" [width]="'100%'" [height]="'100%'"></ngx-shimmer-loading>
        <ng-template #appCover>
            <img src="assets/media/image/slider-image/slider-1.png">
            there
        </ng-template>

and my typescript file game-page-details.component.ts

  apkDto: ApkDto = null;

  ngOnInit(): void {
    this.gameId = this.route.snapshot.paramMap.get('gameId');
    this.loadApkInfo(Number(this.gameId));
  }

  private loadApkInfo(apkId: Number) {
    // Get the information about the game
    const param = { id: Number(apkId)};
    this.searchApkController.getApkByIdUsingGET(param).subscribe(
        (apkDto) => {
          if(apkDto) {
            console.log(apkDto);
            this.apkDto = apkDto;
            
          }
        },
        (error) => {
          //TODO: if there is an error, we notify the cloudwatch, but show to user that there no notification
        });

  }

At the end of subscribe request, the apkDto variable is not updated in the front. How could I subscribe the local variable apkDto (without creating external service) so when the request is finished, the variable is updated ?

Thanks.

Rather than subscribing (and also probably trigger change detection) manually, use `| async`. — developer033, Aug 01 '21 at 00:31
@developer033 do you have an example ? i found many example but don't know which i have to choose — Teddy Kossoko, Aug 01 '21 at 12:43

score 1 · Answer 1 · answered Jul 31 '21 at 19:09

1

Try adding a semi-colon after your *ngIf="!apkDto;.." per instructions at https://angular.io/api/common/NgIf#description

answered Jul 31 '21 at 19:09

Esaith

706
9
12

i add it but the result is the same – Teddy Kossoko Jul 31 '21 at 19:27

score 1 · Answer 2 · edited Aug 01 '21 at 22:58

Based on developer033's proposed solution and demo, I did something like this based on async:

  @Input()
  apkDto: ApkDto = null;
  apkDto$: Observable<ApkDto>;
 
 
  const param = { id: Number(apkId)};
  this.apkDto$ = this.searchApkController.getApkByIdUsingGET(param);

and the html file

<img *ngIf="apkDto$ | async as apkDto; else appCover" src="{{ apkDto.translatedMetadataList['EN'].coverDownloadUrl }}">

<ng-template #appCover>
  <ngx-shimmer-loading [width]="'100%'" [height]="'100%'"></ngx-shimmer-loading>
</ng-template>
<div class="banner_overlay">
  <img src="assets/media/image/game-page/overlay.png">
</div>

score 0 · Answer 3 · answered Jul 31 '21 at 19:54

0

Angular may not update the view automatically (depending on change detection strategy). A way to ask Angular to render the view is to inject ChangeDetectorRef and call this.changeDetectorRef.markForCheck();

See this answer explains it deeper.

answered Jul 31 '21 at 19:54

serrulien

695
4
14

Angular variable is not updating when request if finished

3 Answers3