在 (#loading) ng-template 中时，ion-progress-bar 显示不正确

Question

this is my first question. I've done a #loading template with an ion progress bar inside, but it doesn't show on the footer of the page (nor in the header if i try it too). It shows next to header.

<ng-container *ngIf="getLibraryService.getLibraryItem$ | async;else loading; let items"> 
// code
<\ng-container>
<ng-template #loading>
  <footer><ion-progress-bar type="indeterminate"></ion-progress-bar></footer>
</ng-template>

Later I tried something to avoid this ng-template, doing a variable isLoadingActive and a function to isLoading(b: boolean). But i cannot get it to work more than once:

<ng-container *ngIf="getLibraryService.getLibraryItem$ | async; else loadingCaller; let items">   
  {{ showLoading(false)}}
  <ng-container *ngIf="items?.length > 0; else emptyLibrary">
     // code
  <\ng-container>
<\ng-container>

<ng-template #loadingCaller>1{{showLoading(true)}}</ng-template>
<footer>
  <ion-progress-bar *ngIf="isLoadingActive" type="indeterminate"></ion-progress-bar>
</footer>

I have put an {{ isLoadingActive }} in the.html to track the value, and it seems it doesn't change when the Observer<libraryItem[]> sends new values that i have filtered in my functions. Or if i put a {{showLoading(false) }} in my emptyLibrary template and i do an empty search with the ion-search-bar.

I can change the ion-progress-bar to another thing i supose, but not knowing why my {{showLoading(false)}} doesn't trigger the second time the page refreshes (when i click to a filter button or do a research) annoys me a lot.

Answer 1

Finally I got the solution for the problem in this stack overflow question: How to get nativeElement from @ViewChild in Ionic 4/Angular7?

Creating a ion-progress-bar in the html and getting the child in the.ts modifying the properties programatically.

<footer>
  <ion-progress-bar color="secondary" type="indeterminate" #ionPB></ion-progress-bar>
</footer>

// VARIABLES
@ViewChild('ionPB') elemPB: IonProgressBar;

showLoading(bShow: boolean) {
  if (!bShow) {
    this.elemPB.type = 'determinate';
    this.elemPB.value = 0;
    return;
  }

There where another possible answers to change the view that i couldnt manage to get done (ngZone, changeDetectorRef, subjectBehavior, ...).