Comments (12)
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.
Related Issues (20)
- Angular 8.0.0 support HOT 1
- The spinner and the text are not visible if page has scrolled down HOT 2
- Feature: Automatically toPromise() Observables HOT 2
- Access BusyTrackerService HOT 2
- Function calls are not supported in decorators but BusyConfig was called. HOT 2
- Angular 9.0.0 support HOT 1
- Build against angular 10 HOT 2
- Directive isn't accepting options HOT 3
- Upgrade to angular 12 HOT 1
- ngOnDestroy hook not called for custom component set as template HOT 3
- [Question] How can I make the busy indicator showing for the div, not for the whole page? HOT 2
- what about Angular 13? HOT 3
- Upgrade rjxs to newer version HOT 1
- Will subscription be unsubscribed like the "async" pipe? HOT 1
- Upgrade to Angular 15 HOT 2
- upgrade to angular 16
- upgrade to angular 17 HOT 1
- peer dependencies - add rxjs 7.4.0 for V15
- entire app disabled, not only target in angular 17
- signal support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-opensource.