Can't use material components in template option

[michaelblum]

When I use the following as a template:

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

@Component({ selector: 'default-busy', template: `

`, }) export class ProgressIndicatorComponent { constructor() { }; }

I get an ExpressionChangedAfterItHasBeenCheckedError.

If I use *ngIf in my template, I get the following error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'

[victos]

Hi @michaelblum I made a example here, it works well.

[michaelblum]

Oh thank you! I see that does work for individual components. However, I am attempting to make the mat-spinner template work across my entire application (rather than creating a busyConfig in each sub component that has a busy indicator) thus: imports: [ ... NgBusyModule.forRoot(new BusyConfig({ template: MySpinnerComponent })) ]

which IS showing the spinner application-wide however I am also getting the following error for each initialization of each instance of the busy component: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '_mat-animation-noopable: undefined'. Current value: '_mat-animation-noopable: false'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

[michaelblum]

Something like this

[victos]

Hi @michaelblum The parameter of directive ngBusy is required， that means that we can't remove the variable busyConfig , the full demo is here

export class NgBusyTestComponent implements OnInit {

  busyConfig: IBusyConfig = new BusyConfig();
  constructor() { }

  ngOnInit() {
  }

  onClick() {
    const busy = new Promise<any>((resolve) => {
      setTimeout(() => {
        resolve();
      }, 5000);
    });
    this.busyConfig.busy = [busy];
  }
}

[michaelblum]

The demo you just cited, while incorporating the mat-spinner in MySpinnerComponent's template, is not showing the mat-spinner but rather the NGBusy default spinner.

[michaelblum]

Yes, it's strange that the demo you provided is now showing the default spinner with 'Please wait...'

[michaelblum]

I think the problem may be that you are creating the Busy in ngDoCheck?

[victos]

No, it's because I create config use this

busyConfig: IBusyConfig = new BusyConfig();

if I pass this to the ngBusy, the template in busyConfig will replace the template setted here

NgBusyModule.forRoot({
      template: MySpinnerComponent
    }),

I've update the demo, you can see the full demo here

The exception ExpressionChangedAfterItHasBeenCheckedError is because I create the busy in ngDoCheck, but it can be ignore here, I'll try to remove the Error in the next release.

[Dona278]

I have the same issue..

[victos]

fixed in the latest release (6.1.0)

[edjm1971]

fixed in the latest release (6.1.0)

victos, I know this is an old post but I'm new with Angular and am struggling with stupid things. For example, how is it that the top spinner is being displayed over the click button when the ngBusy layer is defined below it?

<button mat-button (click)="onClick()">Click me!

<div [ngBusy]="busyConfig">...

[edjm1971]

Also, how the heck can you alter the template to be something other than the spinner default. I'm trying to use this with a http request where once the call is made the spinner with backdrop loads over the form until the promise subscribe has returned and executed. Appreciate any info you can provide.