entire app disabled, not only target in angular 17
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