I have created a component to reuse the mat-progress-spinner from angular material. I need this in order to avoid putting for every single page the same code. Here is the code that is working:

<div id="overlayProgressSpinner">
    <div class="center">
    <mat-progress-spinner
        style="margin:0 auto;"
        mode="indeterminate"
        diameter="100"
        *ngIf="loading">
    </mat-progress-spinner>
    </div>
</div>

It is simple. Only to set “loading” as true or false.
What did I do?

I put above code inside a custom component. Now it is like so:

<app-progress-spinner></app-progress-spinner>

its HTML code is the same and its TS code is as a follows:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-progress-spinner',
  templateUrl: './progress-spinner.component.html',
  styleUrls: ['./progress-spinner.component.scss']
})
export class ProgressSpinnerComponent implements OnInit {
  loading = false;
  constructor() { }

  ngOnInit() {
  }

  public isLoading(value: boolean) {
    this.loading = value;

  }

  public changeSpinnerCSSClass() {
    const htmlDivElement = (window.document.getElementById('overlayProgressSpinner') as HTMLDivElement);
    if (this.loading) {
      htmlDivElement.className = 'overlay';
    } else {
      htmlDivElement.className = '';
    }
  }

}

when the property “loading” belongs to the current component, I can show and hide the “mat-progress-spinner” component. Otherwise, when it belongs to “app-progress-spinner” it is set but it is not being displayed. The code that I am trying to make it visible is as follows:

          this.progressSpinner.isLoading(false); // it is set, but it does not work.
          this.progressSpinner.changeSpinnerCSSClass(); // it works

it appears that *ngIf=”loading” cannot be set by using the approach the works if the logic behind belongs to the current component.

How to achieve this?

Source: New feed
Source Url How to set a value of a property of a nested item in order to make it visible via *ngIf directive