ngIf is not triggered when value changes

Question

I have a simple mat-spinner which should be triggered when isLoading is true. The variable changes as intended, but the mat-spinner is not visible. It is only visible if I change isLoading to always be true.

Am I missing something? Thanks in advance!

app.component.ts:

import { Component, OnDestroy } from '@angular/core';
import { UtilityService } from './services/utility.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy {
  title = 'cpt';

  isLoading = true;
  subscription;

  constructor(private utilityService: UtilityService) {
    this.subscription = this.utilityService.getIsLoadingObservable().subscribe(isLoading => {
      this.isLoading = isLoading;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

app.component.html:

<div class="loading-shade" *ngIf="isLoading">
  <mat-spinner></mat-spinner>
</div>
<app-router></app-router>

utility.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UtilityService {

  public isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);

  constructor() { }

  getIsLoadingObservable(): Observable<boolean> {
    return this.isLoading.asObservable();
  }

  async setIsLoading(val: boolean) {
    await this.isLoading.next(val);
  }
}

EDIT Adding component which triggers the setter function: start.component.ts:

import { Component } from '@angular/core';
import { NodeService } from '../../services/node.service';
import { UtilityService } from '../../services/utility.service';

@Component({
  selector: 'app-start',
  templateUrl: './start.component.html',
  styleUrls: ['./start.component.scss']
})
export class StartComponent {

  isLoading = false;

  constructor(
    private nodeService: NodeService,
    private utilityService: UtilityService) {}

    async selectNode(val: string) {
      await this.utilityService.setIsLoading(true);
      if (val === 'bank') {
        await this.nodeService.setNode('http://localhost:8091');
      } else if (val === 'auditor') {
        await this.nodeService.setNode('http://localhost:8092');
      } else if (val === 'spv') {
        await this.nodeService.setNode('http://localhost:8093');
      } else {
        await this.nodeService.setNode('http://localhost:8094');
      }
      await this.utilityService.setIsLoading(false);
  }
}

in your subscription just console.log(isLoading) to see what values are being emitted, also check type of value to make sure it is boolean — danday74, Oct 09 '18 at 08:08
@danday74 did this and the value changes as intended but the spinner is not shown — lennertr, Oct 09 '18 at 08:10
can you provide a stack blitz? Because i did an example on my pc and works fine — Jacopo Sciampi, Oct 09 '18 at 08:17
Thakn you. Using setInterval is a bad bad pratcise. You should always avoid that, because you are not solving the problem. There is a reason that cause this problem, and needs to be resolved. — Jacopo Sciampi, Oct 09 '18 at 08:36

score 0 · Answer 1 · answered Oct 09 '18 at 08:12

0

Your code is fine and works here as expected. You do have to manually run the setIsLoading() method, like this:

export class AppComponent implements OnDestroy {
    title = 'cpt';
    isLoading = true;
    subscription;
    test = false;

    constructor(private utilityService: UtilityService) {
      this.subscription = this.utilityService
        .getIsLoadingObservable()
        .subscribe(isLoading => {
          this.isLoading = isLoading;
        });

      setInterval(() => {
        this.test = !this.test;
        this.utilityService.setIsLoading(this.test);
      }, 2000);
    }

    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
}

answered Oct 09 '18 at 08:12

tommueller

2,358
2
32
44

Maybe I should have added it from the beginning, I will edit the code above to add the component which calls the setIsLoading() function – lennertr Oct 09 '18 at 08:14
also with your code within start.component everything is fine. do you actually call the 'selectNode()' function from somewhere? everything working as expected here ... – tommueller Oct 09 '18 at 08:27

score 0 · Accepted Answer · answered Oct 09 '18 at 08:56

0

Okay this has nothing to do with ngIf, sorry. The issue was the setNode() function, where the second setIsLoading() call (back to false) is directly made after the first, because the await is not working as expected.

Thanks all who tried to help!

answered Oct 09 '18 at 08:56

lennertr

150
1
10

ngIf is not triggered when value changes

2 Answers2