Bdtjtk

I've got an application where I'm trying to show or hide an element based on a public variable in a service. This variable is instantiated like show: boolean = false; but is then set from child components.

My problem is that show never seems to update its value.

In doing various debugs, i found that show is set to whatever it's initial value is, but once the view initialization finishes, my inspector shows that show is undefined, although this may not be related to my issue.

So how can I show a parent element from a child component?

Code below:

app.component.html

<div *ngIf="appService.show"> Loading </div>

<div *ngIf="!appService.show"> Content </div>

app.component

export class AppComponent implements OnInit {



    constructor(private appService: AppService) {}



    ngOnInit() {}

}

app.service

export class AppService {



    public show: boolean = false;



    showLoader() {

        this.show = true;

    }



    hideLoader() {

        this.show = false;

    }

}

child.component

export class ChildComponent implements OnInit {



    constructor(private appService: AppService) {}



// This is just an example, I've got the showLoader() method firing after a subscription completes.

    ngOnInit(){

        this.appService.showLoader();

    }

}

The best way to accomplish this is to create an observable to manage the loading state. I prefer to use a BehaviorSubject because it remembers the last value it emitted. You can have multiple components subscribe to the loading service. (more on behavior subjects here).

Here is a link to a stackblitz where I have implemented a simple version of this loader service: https://stackblitz.com/edit/angular-loading-service-subscribe

EDIT: I added the code for the child.component to the answer. I had it in the stackblitz, but forgot to add it here.

Key notes:

loading.service.ts has a BehaviorSubject that manages whether or not the app is loading data. It returns itself .asObservable() so no child components can call .next() on it.

export class LoadingService { 



  private _isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);



  get isLoading$(): Observable<boolean> { 

     return this._isLoading$.asObservable();

  }



   // see the rest of the code in the stackblitz 

}

Once that is wired up, inject it into the component.

app.component.ts

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

    // by making it public, you can subscribe in the template

    constructor(public loadingService: LoadingService) { }

}

app.component.html

<ng-template [ngIf]="loadingService.isLoading$ | async" [ngIfElse]="loaded">

  Loading  

</ng-template>



<ng-template #loaded>

  Content has loaded

</ng-template>



<!-- see child.component -->

<child></child>

the child.component can then control the loading indicator by using the loading.service.

@Component({

  selector: 'child',

  template: `

    <h1>Child Component</h1>

    <button (click)="toggleLoading()">Change Loading</button>

  `,

  styles: [`h1 { font-family: Lato; }`]

})

export class ChildComponent {



  constructor(public loadingService: LoadingService) { }



  // simulates a 3 second load time for fetching data

  ngOnInit() {

    this.loadingService.startLoading();

    setTimeout(() => {

      this.loadingService.stopLoading();

    }, 3000);

  }



  // simple method to simulate user action that loads some new data

  toggleLoading(): void {

    this.loadingService.toggleLoading();

  }

}

check out this resource for info on the ng-template: https://toddmotto.com/angular-ngif-else-then

and this one for the async pipe: https://angular.io/api/common/AsyncPipe

Make the show field as observable.

app.service

import { Injectable } from '@angular/core';

import { BehaviorSubject } from 'rxjs';



@Injectable({

  providedIn: 'root'

})

export class AppService {



  public show$ = new BehaviorSubject(false);

  constructor() { }



  showLoader() {

    this.show$.next(true);

  }



  hideLoader() {

    this.show$.next(false);

  }

}

And subscribe wherever you need to listen it.