angular-opensource icon indicating copy to clipboard operation
angular-opensource copied to clipboard

entire app disabled, not only target in angular 17

Open remdra opened this issue 1 year ago • 0 comments

In angular 17 standalone app, the entire app is disabled, not only the target part.

Steps to reproduce:

  1. create a new app: ng new signal-busy --skip-tests --standalone --no-ssr --directory=. --style=scss

  2. install ng-busy: npm i ng-busy

  3. add in angular.json: "styles": [ ... "node_modules/ng-busy/src/style/busy.css" ]

  4. add in styles.scss: html, body { height: 100%; }

  5. add in app.config.ts: export const appConfig: ApplicationConfig = { providers: [ ..., importProvidersFrom([BrowserAnimationsModule]) ], };

  6. 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); } }

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

  1. 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

remdra avatar Feb 25 '24 07:02 remdra