CODEWITHSUNDEEP
angulartypescript
Prashant Bharadwaj
Prashant Bharadwaj

Reputation: 355

Component not loading up on change of variable in *ngIf

When loading variable changes to false, app-loadingspinner stops being displayed which is expected. But as per my understanding, at the same time app-paginator should start getting displayed which isn't happening. I suspect my understanding is incorrect. If so, how can we achieve the expected behaviour?

deals.component.html

<app-loadingspinner *ngIf="loading"></app-loadingspinner>
<div fxLayout="row" fxFlex.md="70" fxLayoutWrap class="card-deck-container mat-elevation-z4">
    <div fxFlex *ngFor="let deal of deals" class="card-item">
      <app-deals-card [ngStyle]="{'width':'300' + 'px'}" [deal]="deal"></app-deals-card>
    </div>
    <app-paginator *ngIf="!loading"></app-paginator>
</div>

deals.component.ts

export class Deals implements OnInit {
  public deals : Deal[] = []; 
  private next : string;
  private previous : string;
  loading = true;
  constructor(private dataService: DataService) { 
    this.dataService.get_deals().subscribe((res : any[])=>{
      this.deals = res['results'];
      this.next = res['next'];
      this.previous = res['previous'];
      if (res instanceof HttpResponse){
          this.loading = false;
      }
    });
  }

  ngOnInit() {
  }

}

Upvotes: 2

Views: 1170

Answers (1)

Mohan
Mohan

Reputation: 36

the first thing I would look into is what does this.dataService.get_deals() return? It should return an observable but will the type of the observable? will it always be an HttpResponse? (doesnt appear so)

Another suggestion I have is if you are using the ngIf directive. If the goal is to check a boolean value and then display one of two components, maybe try to use the Angular DOM Marker. 

<app-testing *ngIf = "loading; else showAppTester"></app-testing> 

<ng-template #showAppTester> 
<app-tester > </app-tester>
</ng-template>

loading is a boolean value i defined in the typescript that can be changed.

Upvotes: 1

Related Questions