Can't use material components in template option about angular-opensource HOT 12 CLOSED

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

from angular-opensource.

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.

from angular-opensource.

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 ?

from angular-opensource.

Something like this

from angular-opensource.

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];
  }
}

from angular-opensource.

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.

from angular-opensource.

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

from angular-opensource.

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

from angular-opensource.

I have the same issue..

from angular-opensource.

fixed in the latest release (6.1.0)

from angular-opensource.

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!

from angular-opensource.

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.

from angular-opensource.