-
Notifications
You must be signed in to change notification settings - Fork 23
entire app disabled, not only target in angular 17 #40
Description
In angular 17 standalone app, the entire app is disabled, not only the target part.
Steps to reproduce:
-
create a new app: ng new signal-busy --skip-tests --standalone --no-ssr --directory=. --style=scss
-
install ng-busy: npm i ng-busy
-
add in angular.json:
"styles": [
...
"node_modules/ng-busy/src/style/busy.css"
] -
add in styles.scss:
html,
body {
height: 100%;
} -
add in app.config.ts:
export const appConfig: ApplicationConfig = {
providers: [ ..., importProvidersFrom([BrowserAnimationsModule]) ],
}; -
add in app.componet.ts:
@component({
...
imports: [..., NgBusyModule],
})
export class AppComponent {
...
busy: Subscription[] | undefined[] = [undefined, undefined, undefined];simulate(idx: number): void {
this.busy[idx] = of(void 0).pipe(delay(4000)).subscribe();
setTimeout(() => { this.busy[idx] = undefined; }, 5000);
}
} -
add in app.component.scss:
button {
font-size: 25px;
padding: 10px;
margin: 5px;
}
:host {
display: flex;
height: 100%;
}
div {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
- replace app.component.html with:
<div [ngBusy]="busy[0]">
<button (click)="simulate(0)">Click Me!</button>
</div>
<div [ngBusy]="busy[1]">
<button (click)="simulate(1)">Click Me!</button>
</div>
<div [ngBusy]="busy[2]">
<button (click)="simulate(2)">Click Me!</button>
</div>
Click any button. Entire app is disabled, instead of the coresponding part.
signal-busy.TGZ